Camera position changes in `THREE.OrbitControls` in three.js

Question

The THREE.OrbitControls working fine when loaded with the initial camera position, but when the camera position and camera rotation is changed using a button click. the position of camera changes but on clicking the canvas to rotate the camera on new view the position of camera suddenly changes

Camera:

 Camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 1000);
 Camera.position.set(170, 120, 400); //intial cam position
 Scene.add(Camera); 


Camera.position.set(30, 167, 81);
Camera.rotation.set(-0.149, 0.3, 0.045); //final cam position

Orbit controls:

controlz = new THREE.OrbitControls(Camera, Renderer.domElement);

fiddle

Solution

If you use THREE.OrbitControls and you want to change the camera target or position you should do like this:

Update position:

camera.position.set(-0.041, 1.9, -1.21);
controls.update();

Demo

Update target:

controls.target.set(30, 167, 81);
controls.update();

Demo

Reset camera

To reset the camera to the initial position you can do:

controls.reset();

Comments

[ArUn]

i have update with a fiddle, can you have a look at it

[ArUn]

I think i need to update the center of the controls ??

[ArUn]

on rotating the camera on the first time it is loaded ,and after the click is different, how to achieve it

[Wilt]

Doestn't the fiddle in my answer demonstrate exactly that what you are asking for?

[user2780638]

It doesn't work for camera rotation; camera.position.set(-0.041, 1.9, -1.21); camera.rotation.z = 0.785398; controls.update();