Question

我使用OrbitControls，设置camera.rotation.y = Math.PI/2或controls.object.rotation.y = Math.PI/2 相机旋转，没关系。

controls.update()之后。相机返回原位。鼠标移动时会发生同样的情况。

如何更新相机的旋转？

Answer 1

OrbitControls控制您的相机。

您不能独立于OrbitControls旋转相机。

我所做的是修改OrbitControls.js本身，以公开名为“ rotateLeft”的内部方法，以便可以从代码中调用它。

将此添加到OrbitControls：

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

然后您可以手动执行controls.rotate( degrees * Math.PI / 180 )

Answer 2

OrbitControls让＆＃34;看看＆＃34; target位置，因此只需旋转相机就不会影响控件。但是，移动相机会。

如果要根据旋转设置摄像机的位置，可以旋转摄像机，从摄像机获取前向矢量，并将其相对于目标位置定位。这是一个粗略的例子：

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

希望有所帮助！

Answer 3

老问题，但我在三个 0.124.0 中遇到了与 OrbitControls 相同的问题。

使用更新版本的 Shannon Norrell 解决方案解决了这个问题。修改 OrbitControls.js 以公开内部方法。

// 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);
}

three.js OrbitControls。怎么更新旋转相机？

3 个答案: