Three.js raycaster 到底在做啥？

Posted 2023-02-27

【中文标题】Three.js raycaster 到底在做啥？

【英文标题】：What is Three.js raycaster exactly doing?Three.js raycaster 到底在做什么？

【发布时间】：2014-03-20 10:00:09

【问题描述】：

我见过使用 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 到底是什么？为什么是这些值？

我需要为正交相机命中检测编写代码，但我首先需要了解透视相机案例中发生了什么。

【参考方案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