三.js OrbitControls。如何更新旋转相机？答案

【问题标题】：three.js OrbitControls. How update rotation camera?三.js OrbitControls。如何更新旋转相机？
【发布时间】：2021-06-09 21:20:26
【问题描述】：

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

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

如何更新相机的旋转？

【问题讨论】：

标签： three.js

【解决方案1】：

OrbitControls 控制您的相机。

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

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

将此添加到 OrbitControls：

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

然后你可以手动做controls.rotate( degrees * Math.PI / 180 )

【讨论】：

【解决方案2】：

OrbitControls 使“查看”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();

希望有帮助！

【讨论】：

【解决方案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);
}

【讨论】：