Search code examples
3drotationgsapcube

Trying to make a smooth dragging 3d box rotation

I need help with something. I'm new to JS and trying to make a 3D cube rotate. I found a cool example on Code Pen

https://codepen.io/willbrowning/pen/WQojME

and want to do something similar with plain JS.

But my version isn't smooth, and I'm having trouble making the cube rotate while holding the mouse down. It currently waits for me to finish moving the mouse before turning. Any simple tips or advice would be great. Thanks!

here is a link to my code pen:

type here

https://codepen.io/razorchoice/pen/LYaBqeQ
Solution

  • Some thoughts:

    • Their animation is faster than yours, which would increase the responsiveness.
    • I edited your .box transform property to transform: translate3d(0, 0, 0);, which seems to fix a sudden jump when clicking for the first time.
    • They use multiple JS libraries, like hammer and TweenLite
    • One of the biggest issues with yours is that you can "cut" the animation by clicking on it. So I did a simple setTimeout call to avoid re-triggering the animation.
    • I didn't use the library you used to do the elastic rotation. This made the animation become more tightly under my control so I could set the setTimeout call to be more precise.

    Considering all of those things, I made another pen based on yours.