Three js 3D rotation

Question

I have 2 mesh objects. Anchor and Rod. The Anchor rotates around z-axis, as illustrated by the image. The rod is supposed to move only backward and forwards. Here is the image: http://imageshack.us/photo/my-images/841/7a83.png/.

But i am stuck with trying to figure out the matrix calculation. For example if the anchor rotates 45degrees, so its facing the x-axis, how can i make the rod still move backwards and forwards?

Answer 1

Just as scooby37 noticed, combination example provided by Troopers is not valid. You should NOT:

new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI/2);

Instead you can try something like:

let rotation = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), Math.PI / 6.0);
let transformation = new THREE.Matrix4().makeTranslation(0, this.height, 0);
this.mesh.applyMatrix(rotation.multiply(transformation));

which introduce matrix multiplication - usual way transformations should be combined.

Answer 2

For the rotation around z axis :

var rotation = new THREE.Matrix4().makeRotationZ(Math.PI/2);

For the translation, where z is your delta :

var translation = new THREE.Matrix4().makeTranslation(0, 0, z);

You can combine the two transformations in beginning with the translation :

var transformation = new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI/2);

var transformation = rotation.multiply(translation);

Then apply transformation to your geometry :

geometry.applyMatrix(transformation);