Simple 3D cube roll animations not working

[MdR]

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: THREE animate move/roll - JSFiddle - Code Playground

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

requestAnimationFrame

but that doesn’t do much.

Thanks a lot

[Mugen87]

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.

[MdR]

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): https://jsfiddle.net/mauricederegt/5ozqg9uL/3/

[Mugen87]

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.

How to rotate the camera - gsap

So I am trying to rotate the camera I am using orbit controls I am using gsap I want to rotate it so basically it’s kind of like a birds eye view on the scene but for some reason the tween never starts using camera.rotation how ever if I use for example camera.position or controls.target the camera will move so I know there’s no error with the code anyways how can I rotate the camera so it’s looking ‘down’ here is a snippet that won’t work: gsap.to(camera.rotation, { duration: 3, …

Need help with gsap camera and OrbitControls animations

Hello all. I’m hoping to get some help with gsap animations around a scene. I know we are not supposed to ask multiple questions in one post, but I think fixing one of my issues will fix everything. So, please forgive me for asking so much. I put together a quick scene with a few spheres, along with buttons that animate the cameras movement to the spheres. There is also a scene reset button in the dat.gui that puts the scene back to its original position. The example is here https://codepen.…

And here is a more complex example: Edit fiddle - JSFiddle - Code Playground

[Havelkao]

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

[MdR]

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