three.js OrbitControls. How update rotation camera?

Question

I use OrbitControls, set camera.rotation.y = Math.PI/2 OR controls.object.rotation.y = Math.PI/2 The camera rotates, it's okay.

After controls.update(). The camera returns to its original position. The same happens when the mouse moves.

How do I update my camera's rotation?

Answer 1

OrbitControls takes control of your camera.

You cannot rotate the camera independently of the OrbitControls.

What I did was to modify OrbitControls.js itself to expose an internal method called "rotateLeft" so that I can call it from my code.

Add this to OrbitControls:

this.rotate = function(degrees) {
    rotateLeft(degrees);
    this.update();
}

and then you can manually do controls.rotate( degrees * Math.PI / 180 )

Answer 2

OrbitControls makes the "look at" the target position, so just rotating the camera won't affect the controls. However, moving the camera will.

If you want to set the camera's position based on the rotation, you can can rotate the camera, get the forward vector from the camera, and position it relative to the target position. Here's a rough example:

// ... rotate the camera and update the camera's matrices

// get the forward vector
const fwd = new THREE.Vector3(0,0,1);
fwd.applyMatrix3(cam.matrixWorld).normalize();

// ... generate an offset vector by multiplying the forward vector
// by a desired distance from the target

cam.position.set(controls.target).sub(offset);

controls.update();

Hope that helps!

Answer 3

Old question but I had the same problem with OrbitControls in three 0.124.0.

Solved it with an updated version of Shannon Norrell's solution. Modifying OrbitControls.js to expose an internal method.

// Add to OrbitControls.js
this.rotate = function(rotateX, rotateY) {
   // rotateX angle to mouse X
   let element = scope.domElement;
   let x = (rotateX * element.clientHeight) / (Math.PI * 2);
   // rotateY angle to mouse Y
   let y = (rotateY * element.clientHeight) / (Math.PI * 2);
   // Add to previous mouse point
   x = rotateStart.x + x;
   y = rotateStart.y + y;
   handleMouseMoveRotate({clientX: x, clientY: y});
}

// Using
onRotateX(deg) {

   controls.rotate(deg * Math.PI / 180, 0);
}