使用鼠标围绕中心旋转 Three.js 相机

Posted 2023-02-22

【中文标题】使用鼠标围绕中心旋转 Three.js 相机

【英文标题】：Rotate Three.js camera around center using mouse

【发布时间】：2017-03-30 09:20:04

【问题描述】：

我正在尝试使用鼠标围绕中心点 (0, 0, 0) 旋转相机，但如果我向右或向左旋转 180 度，则尝试向上或向下旋转，它不会旋转完全垂直。

我正在尝试使用纬度/经度坐标，然后将其转换为笛卡尔坐标：

this.camera.position.x = Math.sin(this.lat) * this.alt;
this.camera.position.z = Math.cos(this.lat) * Math.cos(this.lng) * this.alt;
this.camera.position.y = Math.cos(this.lat) * Math.sin(this.lng) * this.alt;
this.camera.lookAt(new THREE.Vector3(0, 0, 0));

这里有一个最小的例子：https://jsfiddle.net/qsor9w27/2/

【参考方案1】：

我认为最简单的方法是使用OrbitControls 或TrackballControls

请参阅使用 OrbitControls 的 this example。

【讨论】：

是的，但我更愿意自己做，这样我才能理解它是如何工作的。

我明白了 :) 使用 Spherical 怎么样，它已经在 Three.js 中并且它曾经有球坐标，可能对你的相机和极角 (phi) 的问题更好？