Search code examples
javascriptcamerathree.jsposition

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

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();