three.js - Rotate around World Axis

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I tried to rotate an object arount the Worlds-Y-Axis, with

myObject.rotateOnWorldAxis(new THREE.Vector3(0,1,0),THREE.Math.degToRad(1));

but the result was, that the object is only rotated in object space.

To be sure that I used the correct method I looked into the documentation and found that there are three methods to rotate an object:

.RotateY(rad) // rotate in Local Space

.rotateOnAxis(axis,rad) // rotation in Object Space

.rotateOnWorldAxis(axis,rad) // rotation in World Space

It seems that I used the correct method.
Is this a bug or an understanding problem on my side?

Here is a JSFiddle which illustrates my problem (the blue cube should rotate around the world axis).
Here is a second Fiddle where thy cyan cube is a child of another object.

You're adding them all to


    scene

, which is your world. All rotation methods will do the same – davidpox Jun 3, 2019 at 11:13 @davidpox sorry I don't understand it yet. They are rotating around the objects axis not around the worlds axis? I created a second fiddle where the cyan cube is the child of an other object. jsfiddle.net/4wpxyLg0/2 – Karlheinz Reinhardt Jun 3, 2019 at 11:25 @davidpox maybe can you give me an example where rotateOnAxis() behaves differently from rotateOnWorldAxis()? – Karlheinz Reinhardt Jun 3, 2019 at 11:29 @KarlheinzReinhardt If your axis are aligned in Object Space and World Space, the rotation will look the same. But they are not, as you can see in this example: JSFiddle uncomment to see the difference. – ScieCode Jun 3, 2019 at 12:22 @ScieCode Thank you now I understand it. I thought that the position of the pivot point changes depending on the function -> e.g. in


    rotateOnWorldAxis()

pivot point would be in Worlds center. But in reality the pivot point is always in/at the objects origin ; only the direction of the given axis is relative on the Space. – Karlheinz Reinhardt Jun 3, 2019 at 15:11

It looks to me like your real question isn't regarding world space or object space rotations, cause those are working as expected in your examples.

You probably meant, how to change the point of rotation of an object. If that is the case, you have two options, you can either translate all your geometry vertices in respect to a pivot point of rotation. That way, your pivot will be centered at (0,0,0) and your vertices will rotate in respect to that.

mesh.geometry.translate( x, y, z );
Or you can make your object a child of a different Object3D (pivot), position your original mesh similarly to what was described above and rotate your pivot mesh.
var cube = new THREE.Mesh( geometry, material );
var pivot = new THREE.Object3D();
cube.position.set( 0, 12, 30 ); // offset from center
pivot.add( cube );
scene.add( pivot );
//...
pivot.rotation.y += Math.PI/2;
JSFiddle
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.