Change camera position smoothly

Questions
,
1

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
2

You can use TWEEN.js for smooth movement.

This is what you need?

3 Likes
3

@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.

4

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
5

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?

6

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
7

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

2 Likes
8

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 ?

9

Using Google, you’ll find tons of examples related to that subject.
For example: Camera Tween · GitHub

Forum: Search results for 'tween.js camera position' - three.js forum

2 Likes
10

Thanks a lot @prisoner849 .

11

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

12

@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

13

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
14

Sorry for the inconvenience. I will share an working example

15

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
16

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

17

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.

18

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