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＆amp; 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然后通过该世界点从相机位置创建一条光线。

如果您需要帮助来理解这些概念，请参阅this answer中的参考资料。

此外，对于正交相机，您需要使用稍微不同的方法。有关详细信息，请参阅this answer。

three.js r.66

什么是Three.js raycaster正在做什么？

1 个答案: