Three.js Raycaster 工程实战：NDC、layer 与拾取稳定性

文章目录Three.js Raycaster 工程实战NDC、layer 与拾取稳定性一、屏幕到射线二、可拾取集合三、常见问题四、结语Three.js Raycaster 工程实战NDC、layer 与拾取稳定性Raycaster从屏幕点发射射线并与场景求交。工程上要统一坐标系、收窄遍历集合、处理层级与透明。一、屏幕到射线constpointernewTHREE.Vector2();pointer.x(x/width)*2-1;pointer.y-(y/height)*21;raycaster.setFromCamera(pointer,camera);注意Y 轴翻转与 canvas 的 CSS 尺寸非物理像素混用会导致偏移。二、可拾取集合对intersectObjects(list, true)传入业务白名单可点选对象数组比遍历整场景更稳recursive仅在需要子层级时开启。三、常见问题现象排查点不中NDC 是否用画布显示尺寸相机矩阵是否当帧更新穿透透明可自定义排序或在材质层过滤多图层raycaster.layers与物体的layers对齐四、结语拾取是交互与场景的契约坐标算对、集合收窄、层级一致线上才能稳定命中。