Raycaster 射线属性

[alindas]

Raycaster.intersectObjects() 返回一个数组，每个元素是一个交点对象，每个交点对象都包含以下属性：

• distance：该属性用于存储从原点（Raycaster发射的起点）到交点的距离。
• face：这是与光线相交的几何体的面。它存储了这个面的各种属性，如面的法线、顶点等。
• faceIndex：这是几何体faces数组中相交面的索引。对于BufferGeometry，这是相交三角形的索引。
• object：这是被光线射线选中的物体。
• point：这是光线与模型相交的点在世界坐标中的位置，是一个THREE.Vector3类型对象。
• uv：这是模型材质的uv坐标，可以用于访问模型材质的详细信息，它是一个THREE.Vector2类型的对象，只有在相交的几何体形状有uv属性时苏醒返回。

当你需要获取用户点击物体的确切位置，或者根据命中点修改物体表面属性如颜色等操作时，这些信息会非常有用。

[alindas]

归一化的设备坐标：
范围从-1到1的二维空间，其中，(0,0)指的是屏幕中心，(-1,-1)指的是屏幕的左下角，(1,1)指的是屏幕的右上角

renderer 的 domEle 与屏幕宽高一致的换算：

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

如果渲染器的尺寸并非全屏，你应该相对于渲染器的宽高（而不是窗口或屏幕的宽高）来计算鼠标位置。并且需要考虑相对于渲染器的偏移。

let rect = rendererDom.getBoundingClientRect();

// 将鼠标位置降维为 device coordinates (-1 to +1)
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;