How to smoothly resetting camera angle with OrbitControls?

Questions
, , ,
1

Hello everyone!

I’m having trouble achieving something that seems basic. Here’s the issue: I have a scene with a 3D model and OrbitControls enabled with only enableRotate activated. I would like the camera to return to its initial angle when the user stops interacting with OrbitControls. I can achieve this using the end event of OrbitControls and the reset method, but I would like the return to the initial angle to be smooth (unlike the abrupt change caused by reset()). Apparently, once OrbitControls is initialized, modifying the rotation parameters of the camera has no effect.

I was planning to use GSAP to accomplish this in the following way:

gsap.to(camera.rotation, {
    duration: 0.1,
    x: 0.6,
    y: 0.3,
    z: 0,
    ease: "power2.out",
    onUpdate: function () {
        console.log('camera.rotation', camera.rotation);
    }
});

Although the values of x, y, and z seem to change, it has no impact on the rendering.

Thank you very much for your help!

2

Maybe there are several ways to do this, including disabling the controls, unhooking its event listeners and/or stop using its update method. Personally, I like the way of forcing the camera of the OrbitControls to go to specific angles by juggling with their max and min values. Try it here:

https://codepen.io/boytchev/full/BaGppmJ

image

6 Likes
3

Thank you so much! That’s exactly what I needed!

1 Like
4

Longtime lurker and just created and account to thank you for sharing this — very helpful!