Animation with Tween.js

as you can see in Video I move camera from its current position to (0, 100, 0) for top view.
I used tween for animation.
as you can see animation is not perfect.
camera moves from current position to (0, 100, 0). but camera movement is not same that I want.
camera moves perfect. but in last camera rotate at its own axis.

What you are seeing is called gimbal lock.
You’ll want to use Quaternions for the rotation to ameliorate this issue. Check out this example: https://threejs.org/examples/#webgl_math_orientation_transform

I believe this post can also shed some light on how to solve the issue with code for you to test: Animating Quaternion Rotation

1 Like