Translate object in world space usings it's local rotation

Question

I'm using Three.JS to render some objects. I'm struggling with some very simple object rendering and translation.

The scenario is that I spawn an object at 0,0,0 in world space with 0,0,0 rotation.

var scene, camera, cube;

...

function change() {
  var degrees = 90
  var zTranslation = 5;

  cube.rotation.y = degrees * Math.PI / 180;
  cube.rotation.z = zTranslation;

  var newCubeMatrix = cube.matrix;        
  newCubeMatrix.identity();
  newCubeMatrix.multiplySelf(THREE.Matrix4.rotationYMatrix(cube.rotation.y));
  newCubeMatrix.multiplySelf(THREE.Matrix4.translationMatrix(cube.position.x, cube.position.y, cube.position.z));

  cube.updateMatrix();
}

function loop() {
  renderer.render( scene, camera );
}

...

What now happens is that the cube is rotation 90 degrees and translated 5 points on the Z axis in world space, not 5 points on the Z axis in the cube's local space.

How do I make the cube translate 5 points in it's local space?

Answer 1

The order of the transforms is important.

Rotating around Y and then translating along Z rotates the object around its Y and then translates along world Z.

Translating along Z and then rotating around Y rotates the scene around Y, that is, the cube is already 5 units from the origin, and the whole scene rotates.

First of all you need to determine which you're trying to achieve. It may be useful to forget about different coordinate spaces, just assume the cube starts at the scene's origin and you then apply several transforms to its vertices, all in scene space.

Once you've figured out the correct order of operations, figure out (either by trial and error or reading the documentation (!)) whether the API premultiplies or postmultiplies the vertices and the matrices. Then make sure you concatenate the transforms in the correct order, because P*T*R will yield a different P' (transformed P) than T*R*P, even if the composite transform T*R is the same.