如何从鼠标事件获取偏航和俯仰值

Question

我正在画布的html Web应用程序中显示全景图像。如果用户在任何屏幕位置单击图像，我都需要获取/计算该鼠标单击位置的偏航和俯仰值。

是否可以通过从全景图像上的鼠标单击位置获取偏航和俯仰值？请通过示例代码或逻辑帮助我，我是ThreeJ和全景世界的新手，我们将不胜感激。

Answer 1

THREE.Euler角度可以从方向计算，该角度是从视角到世界空间中的光标（鼠标）位置给出的。

在归一化设备空间中，可以轻松找到从相机到光标的光线点。在规范化的设备空间中，所有坐标都在[-1，1]范围内，并且所有具有相同 x 和 y 坐标的点都位于同一条射线中。如果 z 坐标为-1，则该点位于近平面上，如果 z 的坐标为1，则该点位于远平面上。

例如远端平面上的NDC点和通过光标的射线上的NDC点（在下面的event中是鼠标事件给出的参数）：

let x = 2 * event.clientX / window.innerWidth - 1; 
let y = 1 - 2 * event.clientY / window.innerHeight;
let cursorpos = new THREE.Vector3(x, y, 1);

可以通过THREE.Vector3.unproject()将规范化设备空间中的该点转换为世界空间中的一个点。函数的参数必须是THREE.Camera，用于定义视图和投影：

cursorpos.unproject(camera);

摄影机的移动方向是从摄影机位置到世界空间中光标位置的归一化方向：

let dir = new THREE.Vector3().copy(cursorpos).sub(camera.position).normalize();

从这个角度，Euler angles可以由.setFromVector3计算：

let euler = new THREE.Euler().setFromVector3(dir);

注意，角度以弧度表示，在Are Euler angles the same as pitch, roll and yaw?的答案中讨论了欧拉角与俯仰，偏航和横滚之间的关系。