(Cube) Rotation with three.js

Question

I'm working on a project in three.js where I have a cube and can rotate it with some buttons (arrows). The rotation works, but after some rotations it doesn't spin in the right direction anymore. Probably because the axes of the cube are shifted? But this confuses me a little bit..

I need the cube to be able to rotate up, down, left and right by some controls. This is basically how it currently works:

When a direction is pressed, say 'right', we update the mesh.rotation.y with tween.js until mesh.rotation.y is rotated in a 90 degree angle.

//SCENE, MESH,.. SETUP
...

function rotateRight(){
   var start = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y, z:cubeMesh.rotation.z};
   //RIGHT: y + 90°
   var end = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y + degreeToRadians(90),
              z:cubeMesh.rotation.z};

   var tween = new TWEEN.Tween(start)
      .to(end, 1000)
      .easing( TWEEN.Easing.Exponential.InOut )
      .onUpdate(function(){
         cubeMesh.rotation.x = this.x;
         cubeMesh.rotation.y = this.y;
         cubeMesh.rotation.z = this.z;
       })
   .start();
}

function animateScene(){
    requestAnimationFrame(animateScene);
    TWEEN.update();
    renderer.render(scene, camera);
}

What do I need to change to keep this cube rotating in the right directions? Can we fix the axes of the cube so they won't shift? I've read something about world axis vs object axis, is this something I need to change and how can I implement this?

Thanks in advance!

Can you provide a working demo on [JsFiddle](http://jsfiddle.net/) or another similar online editor? [example with three.js](http://jsfiddle.net/) — Jay, Jul 18 '13 at 15:15
[Duplicate](https://stackoverflow.com/questions/11060734/how-to-rotate-a-3d-object-on-axis-three-js) as per the OP's own [answer](https://stackoverflow.com/a/17817843/8112776). — ashleedawg, Dec 08 '20 at 13:24

score 0 · Answer 1 · answered Jul 19 '13 at 09:11

0

Sorry, cannot comment and this is for sure not the perfect answer but if you have problems with the rotation, maybe your tweening is not quite right? What strikes my eye is that your function is only doing rotation on 1 axis and still you update all three axes. Maybe you should leave away x and z and only update the correct axis? Maybe this helps with your problem, too because you know what you are actually changing. It is just an idea , though.

answered Jul 19 '13 at 09:11

GuyGood

1,377
1
9
12

It was just an example of the method I use. In the project I also need the x-axis to rotate up and down. But if I turn left first, then up, then the next left-right rotation isn't correct anymore because apparently the axes of the object move with the the rotation and then I have to mess with the z-axis too.. I just wonder if I could rotate the cube around some fixed axes that don't move. – david Jul 19 '13 at 17:10

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

Figured it out, thanks to this post: How to rotate a 3D object on axis three.js?

Turned the object around the world axes.

edited May 23 '17 at 12:03

Community

1
1

answered Jul 23 '13 at 18:11

david

37
1
5

1

Could you post your solution? I want to do the same thing as you describe and I get rotation around world axis working as long as I don't use tweening. However trying to animate the rotation, I get unwanted results as the cube "resets" the rotation when the animation starts, resulting in the wrong end result. Thanks. – Claudijo Sep 11 '13 at 21:50

(Cube) Rotation with three.js

2 Answers2