Three.js raycaster到底在做什么？

Question

我已经看到了使用Three.js进行冲突检测的示例代码，所有代码都有：

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );

我的问题是，什么是event.clientX / window.innerWidth）* 2-1和event.clientY / window.innerHeight）* 2到底是什么？ 为什么要这些值？

我需要编写用于正交相机命中检测的代码，但首先需要了解透视相机盒中发生的情况。

Answer 1

( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1

将像素坐标从屏幕空间映射到规范化设备坐标（NDC）空间中的点。

projector.unprojectVector( vector, camera );

将NDC空间中的点映射到世界空间中的点。

然后， Raycaster从相机位置到该世界点创建一条射线。

如果您需要帮助来理解这些概念，请参阅此答案中的参考。

另外，对于正交摄影机，您需要使用稍微不同的方法。 有关更多信息，请参见此答案 。

three.js r.66