Rotating object around object axis THREE.js

Question

Having some trouble rotating objects around its own axis in THREE.js. I am using the STLLoader to import stl files in format model.stl-0, model.stl-1,...model.stl-13. Here is relevant code:

for (i = 0; i<14; i++) {
  loader.load( './models/stl/binary/model.stl-'+ i + '.stl' );
};

Which I use to loop the loader and import all the files.

object.rotation.x = value;

Which is how I am trying to rotate the object. However, each model is arranged in an arch, and upon using the above method to rotate, rotation is done around center axis of the entire arch of models rather than around center axis of the individual model itself.

How can I rotate object around its own axis?

Thanks

Andrew Andrew · Accepted Answer · 2016-01-13T19:16:26

Although it's been over a year since this was originally asked and I figured it out, I thought I'd leave my solution here for anyone else with this issue. If you need to reset the origin of an object so that you can rotate it around its own axis instead of the global origin, use this:

object.geometry.computeBoundingBox();

var boundingBox = object.geometry.boundingBox;

position = new THREE.Vector3();
position.subVectors( boundingBox.max, boundingBox.min );
position.multiplyScalar( 0.5 );
position.add( boundingBox.min );
position.applyMatrix4( object.matrixWorld );

object.geometry.applyMatrix( 
  new THREE.Matrix4()
    .makeTranslation( 
      -(position.x), 
      -(position.y), 
      -(position.z) 
    ) 
);

object.geometry.verticesNeedUpdate = true;

object.position.x = position.x;
object.position.y = position.y;
object.position.z = position.z;

Rotating object around object axis THREE.js

2 Answers