Rotating around a moving point

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;

[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;