Three.js: Rotating around a moving point

[shaharz]

Trying to get some solar system action going (not really, but similar mechanics) with three.js. I have code that kinda works but seems far from elegant. Also, the whole adding and subtracting the position business is off.

What would be the proper way to do this? I don't think I can use a dummy object (see #1593) in this program because the center point may change during runtime.

Code: http://jsfiddle.net/HVBAP/1/

The crucial pieces are:

mat1 = new THREE.Matrix4();
axis = new THREE.Vector3();
axis.sub(two.position, one.position);
axis.crossSelf(new THREE.Vector3(1,0,0));
axis.normalize();
mat1.makeRotationAxis(axis, 0.005);

and in animate():

two.applyMatrix(mat1);
two.position.addSelf(one.position);
two.updateMatrix();

renderer.render( scene, camera );

two.position.subSelf(one.position);
two.updateMatrix();

Pardon my ignorance, I'm new to 3d.

[mrdoob]

It's much simpler than that... :)

// init

var sun = new THREE.Mesh( sunGeometry, sunMaterial );
scene.add( sun );

var earthPivot = new THREE.Object3D();
sun.add( earthPivot );

var earth = new THREE.Mesh( earthGeometry, earthMaterial );
earth.position.x = 1000;
earthPivot.add( earth );

// update

earthPivot.rotation.y += 0.1;

[mrdoob]

I don't think I can use a dummy object (see #1593) in this program because the center point may change during runtime.

Why not? In my code, just move the earth to the inverse position of where the center is supposed to be.

[shaharz]

I mean the "sun" object may change and I want to be able to simply switch to a different axis of rotation. I imagine with the dummy object approach this would lead to a repositioning issue (of the earth relative to its new pivot), no?

It's also a matter of trying to understand how things work under the hood as well as avoiding creating extraneous objects. But if your say this is the idiomatic way to do this in three.js, I would accept that as an answer :)

[mrdoob]

I think you would end up doing the same computations one way or another...

[gyemeleth]

FYI a child cannot have two parents so if you have the Moon, Jupiter, Pluto, etc you have to add their 3D objects to the sun for rotation and then only add the sun to the scene, otherwise it might not even render.

[AcidLeroy]

Just to take this one step further, if anyone wants to orbit a moon around the earth, I ended up doing something like this:

// init
var moonPivot = new THREE.Object3D();
moonPivot.position = earth.position; 
earthPivot.add( moonPivot );
var moonObj = new THREE.Mesh(moonGeo, moonMat); 
moonPivot.add(moonObj)
//

// render
moonPivot.rotation += 0.1;