Created
November 27, 2020 23:04
-
-
Save jhancock532/cea8ce753617bd704fb4ac2f5390bc91 to your computer and use it in GitHub Desktop.
How to animate a smooth camera angle transition in Three.js, without causing the camera to spin around itself several times.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let time = {t: 0}; | |
| const positionToLookAt = new THREE.Vector3(10, 10, 10); | |
| const startQuaternion = camera.quaternion.clone(); //set initial angle | |
| camera.lookAt(positionToLookAt); | |
| const endQuaternion = camera.quaternion.clone(); //set destination angle | |
| camera.quaternion.copy(startQuaternion); | |
| new TWEEN.Tween(time) | |
| .to({t: 1}, 1000) //duration in milliseconds | |
| .onUpdate(() => { | |
| THREE.Quaternion.slerp(startQuaternion, endQuaternion, camera.quaternion, time.t); | |
| }) | |
| .easing(TWEEN.Easing.Quadratic.InOut).onComplete(() => { | |
| //code that runs on animation completion | |
| }).start(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment