Change camera position smoothly

Hi, I am using Perspective Camera and Orbitcontrols in my Scene. On user inputs, I need to change the camera position from one place to another. at that time, the scene gets flickering. But I need the screen should get off and on smoothly, when the screen gets on, the camera position should be at the changed position. Is it possible , how to do that. If my question is difficult to understand, please ask.

Thanks in advanced :pray:

1 Like

You can use TWEEN.js for smooth movement.

This is what you need?

3 Likes

@Quan_Le Thank you so much for your reply. but this is not my exact need. I no need to move the camera. Just need a black screen off and on (smooth flickering) while changing the camera position.

Since Camera.position is just a Vector3, you can use Vector3.lerp to transition to another position smoothly (alpha argument determines how fast the value will transition to another one.)

Mind, the scene is probably flickering because you are changing camera.position when using OrbitControls. Change controls.target instead - otherwise both you and OrbitControls try to set camera position to different values within one frame.

2 Likes

yes @mjurczyk . I am setting the position of camera and the orbitcontrols’s target too. If I am wrong, then how to achieve that. Because, the camera position decides where should the camera be placed. And the Orbitcontrols target only decides, where the camera should see. But you are saying, we shouldn’t do both changes. Then How to change the camera position and where should it see?

If you are altering both camera and control target positions - try synchronising them to avoid jumpy frames:

const oldTargetPosition = controls.target.clone();

controls.target = someNewTarget;

const dPosition = oldTargetPosition.sub(controls.target);

camera.position.sub(dPosition); // Camera is moved in the same direction and by the same offset, so angle between viewer and target will remain the same.
1 Like

And don’t forget to call controls.update(), if you change something manually.

1 Like

Thank you so much for your suggestions @mjurczyk . I have used this controls.update() statement within animate loop @prisoner849 . So I think, no need to call it whenever the changes occured. And One more thing is, can anyone please share an example for tweening the camera to a position with jsfiddle or any codepen ?

Using Google, you’ll find tons of examples related to that subject.
For example: https://bl.ocks.org/HarryStevens/f9a31f69cf7645c34e473c1250b2ab30

Forum: https://discourse.threejs.org/search?q=tween.js%20camera%20position

2 Likes

Thanks a lot @prisoner849 .

Here, you are setting the target value. But how to set camera position in this method? @mjurczyk

@prisoner849. I have done my requirement with your suggestion of tweening examples. But the camera is moving through inside of the object. Any ways to avoid this? And I am getting some lagging also while camera movement. Please help me to avoid these two issues

Please, provide at least an editable working example, that demostrates the issue(s).
Otherwise, it looks like we’re doing your job for you, additionally providing examples and ideas.

1 Like

Sorry for the inconvenience. I will share an working example

Since Vector3 API is mutating the original vector, camera.position.sub(dPosition); changes the camera position (moves it in the same direction as the target.)

1 Like

Oh. Thanks for your patience and explanation @mjurczyk . But It seems not working as expected. :confused:

Possible (maybe the vector has to be added, not subtracted, I mix those up) - I was just answering the question, as for the thread I stick with @prisoner849’s post.

Okay. But now the first issue has been resolved with the help of @prisoner849 's jsfiddle https://jsfiddle.net/prisoner849/hsjgLc4d/