Simple 3D cube roll animations not working

Hi all,

I am new to THREEJS and at the moment I am trying to move a cube using arrow keys. Please see this fiddle:

All works, I can move the cube using the arrow keys and I even managed to rotate the cube around the correct axis when moving it around. The problem is the animations. I can’t seem to get them to work. At the moment when you press the left arrow key, the cube moves to the left and also rolls around the axis. Well…at the moment it snaps into position, instead of smoothly transitioning.

What I want is that it smoothly moves to the left while it rotates, but how to do that? At the end of the code I do call for the


but that doesn’t do much.

Thanks a lot

Your expected result is not yet clear to me. Do you want…

a) start an animation by pressing a key once. This animation will transform the cube over a certain period of time. It is not necessary to keep the key pressed for this.
b) transform the cube as long as the user presses the key. The transformation would stop as soon as the key is released.

Hi that would be option A

I have a fiddle here of my attempt doing this with CSS. Here the animations work (but never got the rotating direction correct):

Okay, in this case it’s probably best to use an animation library like GSAP 3.

There are some existing topics about using three.js and GSAP in this forum. I suggest you study the following ones in order to get a first impression.

And here is a more complex example:

1 Like

Hello, so I have been trying to wrap my head around this exact problem for couple of weeks myself (I’m also new to three.js) and have come up with this solution:

I’m rotating and animating the pivot around the respective axis, adjusting the position and rotation of the cube and finally resetting the the rotation of the pivot.

I hope this helps :+1:

Very nice! A lot of calculations I see, cool! Up to the next struggle: to let the cube drop off the platform when it rolls off it :smiley: