本文详解 Three.js 射线检测（raycasting）在移动物体上失效的根本原因，并提供基于视口坐标校准的可靠修复方案，确保 Raycaster 始终精准命中实时位置的物体。
本文详解 three.js 射线检测（raycasting）在移动物体上失效的根本原因，并提供基于视口坐标校准的可靠修复方案，确保 `raycaster` 始终精准命中实时位置的物体。
在 Three.js 开发中，射线检测常用于实现鼠标悬停、点击拾取等交互功能。但当被检测物体处于动画或持续位移状态时（如本例中通过 sin() 函数上下浮动的球体），开发者常遇到“射线始终击中旧位置”的问题——表面看是 raycasting “不支持移动物体”，实则源于鼠标坐标归一化逻辑错误，导致射线起点方向计算失准。
核心问题在于原始代码中使用了全局窗口尺寸进行归一化：
mousePosition.x = (event.clientX / window.innerWidth) * 2 - 1; mousePosition.y = (event.clientY / window.innerHeight) * 2 - 1;
该方式仅在
✅ 正确做法是：以渲染画布的真实 DOM 边界为基准，精确计算鼠标相对于 canvas 的局部坐标。需使用 getBoundingClientRect() 获取 canvas 在视口中的实际矩形区域，并据此归一化：
const rect = renderer.domElement.getBoundingClientRect(); mousePosition.x = ((event.clientX - rect.left) / (rect.right - rect.left)) * 2 - 1; mousePosition.y = -((event.clientY - rect.top) / (rect.bottom - rect.top)) * 2 + 1;
注意两点关键细节：
- event.clientX/Y 需减去 rect.left/top，转换为相对于 canvas 左上角的偏移；
- Y 轴方向需取负并加 1（即 -y * 2 + 1），因 Three.js 归一化设备坐标（NDC）中 Y 向上为正，而浏览器 DOM 坐标系 Y 向下为正。
完整修正后的交互逻辑如下（整合进原动画循环更佳，此处为清晰起见仍保留在 mousemove 中）：
window.addEventListener("mousemove", (event) => {
const rect = renderer.domElement.getBoundingClientRect();
mousePosition.x = ((event.clientX - rect.left) / (rect.right - rect.left)) * 2 - 1;
mousePosition.y = -((event.clientY - rect.top) / (rect.bottom - rect.top)) * 2 + 1;
raycaster.setFromCamera(mousePosition, camera);
const intersects = raycaster.intersectObjects([sphere]); // 明确指定目标对象，提升性能
if (intersects.length > 0 && intersects[0].object === sphere) {
sphere.material.color.set(0xff0000); // 使用十六进制数值更稳妥
} else {
sphere.material.color.set(0xffffff);
}
});? 重要补充与最佳实践：
- 性能优化：intersectObjects(scene.children) 会对整个场景遍历，若仅检测少数对象，应传入明确数组（如 [sphere] 或 interactiveObjects），避免无谓计算；
- 材质更新：修改 material.color 后，Three.js 通常自动触发着色器更新，但若使用自定义 ShaderMaterial 或启用 material.needsUpdate = true，需手动标记；
- 动画同步：本例中 mousemove 和 animate 独立运行，理论上存在微小帧不同步风险。更健壮的做法是将 raycast 逻辑移至 renderer.setAnimationLoop 回调内，在每一帧渲染前执行检测，确保与物体最新位置严格同步；
- 抗锯齿与高 DPI：若应用开启 renderer.setPixelRatio(window.devicePixelRatio)，无需额外处理——getBoundingClientRect() 返回的是 CSS 像素，与 clientX/Y 单位一致，天然兼容。
综上，Three.js 的 Raycaster 完全支持动态物体，失效本质是坐标空间映射错误。通过 getBoundingClientRect() 精确锚定 canvas 视口边界，即可一劳永逸解决移动物体交互失准问题，这是生产环境中的标准实践。
