Animate Camera and OrbitControls to its default position in Three.js

Question

I have a scene with Camera and OrbitControls in position. And I'm letting users to move around the scene and change camera view and OrbitControls position.

Now I have a reset button which will reset the scene view to its default position.

Answer 1

We can do this using TweenJS. Just include its JS library on your web page.

Save your Camera position and OrbitControls target position when its ready to display on web like this:

const default_camera_position = { ...camera.position };
const default_controls_target = { ...controls.target };

Now in clickListener of button use this code.

createjs.Ticker.setFPS(60);
createjs.Tween.get(camera.position)
    .to(default_camera_position, 500);
createjs.Tween.get(controls.target)
    .to(default_controls_target, 500);

And That's all.