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?

Do you use gl-matrix.js?

Entity Black
– Entity Black

2013-11-01 15:59:47 +00:00
Commented Nov 1, 2013 at 15:59 — Entity Black
– Entity Black, Commented Nov 1, 2013 at 15:59

Community · Accepted Answer · 2017-05-23 12:17:37Z

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.

Troopers · Accepted Answer · 2017-07-28 14:17:03Z

3

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

edited Jul 28, 2017 at 14:17

answered Nov 4, 2013 at 13:24

Troopers

5,4824 gold badges44 silver badges71 bronze badges

4 Comments

wuahi Over a year ago

I'm quite new to Three.js so i don't really know what i'm missing here. I got the rotation around z-axis to work, but still can't figure out how to make the "rod" move backwards and forwards when the direction changes. I can't do it with makerotationX because it does not allways rotate around x-axis, if you know what i mean.

Troopers Over a year ago

Your transformation is a rotation around z with a rotation around X, so combine the two by multiplying the matrixes : var rotationZ = new THREE.Matrix4().makeRotationZ(angleZ); var rotationX = new THREE.Matrix4().makeRotationX(angleX); var transformation = rotationZ.multiply(rotationX);

wuahi Over a year ago

That works, but the problem is that the object needs to move, and applying a matrix rotates it around the worlds origon. so when it moves the rotation gets larger, and larger. I am not sure how to bind the rotation to a single blocks own origon.

backyardKiwi Over a year ago

This Answer should NOT be accepted or at least corrected you can't combine transformations by: var transformation = new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI/2) - it overwrites them!!! Use something like: var rotation = new THREE.Matrix4().makeRotationZ(this.toolMeshes[index].rotation.z); var translation = new THREE.Matrix4().makeTranslation(this.toolMeshes[index].position.x, this.toolMeshes[index].position.y, 0); var matrix = rotation.multiplyMatrices(translation, rotation);

Collectives™ on Stack Overflow

Three js 3D rotation

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related