CODEWITHSUNDEEP
javascriptthree.jsrotation
schlaegerz
schlaegerz

Reputation: 377

THREEJS how do you rotate around an objects local axis

I am having a hard time understanding how the local axis rotation works in ThreeJS. I saw this Rotate around local axis answer and it is not working quite the way I expected.

If I create a a cylinder and rotate it

const geometry = new THREE.CylinderBufferGeometry( 10, 10, 20 );
geometry.rotateX(Math.PI/2)

How do I then rotate the cylinder along its long axis?

I expect this to do the job: geometry.rotateY(Math.PI/5) but that appears to be rotating it around the world axis. I want to just rotate it around the local axis to make it look the same as if I had done

geometry.rotateY(Math.PI/5)
geometry.rotateX(Math.PI/2)

Can anyone help explain how to rotate around the objects internal axis?

What actually happens: https://jsfiddle.net/h20hnn3n/46/

What I want it to look like: https://jsfiddle.net/81j6g2ms/1/

My use case requires me to rotate around the X and arbitrary amount first and then I need to rotate around the old Y axis, so it would be great if I could do it in this order

Edit: It appears that it matters whether you rotate the geometry vs a mesh. Shouldn't it be equivalent to do it either way?

I'm really confused why this doesn't act the same way: https://jsfiddle.net/10L8se71/2/

Upvotes: 2

Views: 2343

Answers (1)

schlaegerz
schlaegerz

Reputation: 377

In case anyone else runs into this I'll post a solution.

Rotating a geometry works differently than rotating a mesh. So you need to add it to a mesh first. The following ends up with the right result:

const mesh = new THREE.Mesh( geometry, material ) ;
mesh.rotateX(Math.PI/2)
mesh.rotateY(Math.PI/5)

Upvotes: 3

Related Questions