Rotate A Collada Model Around Its Own Y-axis

I have a simple three.js scene that contains a 3D Homer Simpson, on a plane. I want to be able to spin him around on his own y-axis, using the mouse. The following code is almost t

Solution 1:

This is tricky. The problem is that Homer's geometry has him standing in his local coordinate system with his right foot next to the origin.

What you would normallly do in a case like this is call

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( -distance, 0, 0 ) );

and translate the geometry along the local x-axis. That would center Homer, and you'd be done.

If you can figure out the Collada data structure, you can do that.

Another solution is this trick: (1) make your model a child of a parent, (2) make the parent a child of another object, (3) and then offset the parent by some distance:

In your init() function, do this

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 800);
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 45, 1, 100, 10000 );
camera.position.x = 50;
camera.position.y = 120;
camera.position.z = 600;
scene.add( camera ); // don't forget this

scene.add( new THREE.AxisHelper() ); // frame of reference// //////////////////////////////////////////////////// trick to accommodate geometry offsetobject = new THREE.Object3D();
scene.add( object );

parent = new THREE.Object3D();
parent.position.x = -39;
object.add( parent );

parent.add( model );
// //////////////////////////////////////////////////

And then in your animate() function:

object.rotation.y += ( targetRotation - object.rotation.y ) * 0.03;