Three.js Raycasting对移动物体失效问题及替代方案咨询

问题根源 #

你的代码中相机初始化顺序错误：绑定mousemove事件时，camera变量尚未完成初始化，导致射线检测使用的相机参数无效，无法正确识别移动后的球体位置。另外，Raycasting完全支持移动物体，只要物体的变换（位置/旋转/缩放）是通过Three.js标准属性修改的，射线检测会自动使用物体的当前状态。

修正后的代码 #

import * as THREE from "three";

// 基础初始化
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();

// 相机：提前初始化，确保mousemove事件能正确引用
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(5, 5, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));

// 球体对象
const geometry = new THREE.SphereGeometry();
const sphereMaterial = new THREE.MeshLambertMaterial({
  color: 0xFFFFFF, // 修正：去掉引号，直接使用十六进制数值
});
const sphere = new THREE.Mesh(geometry, sphereMaterial);
scene.add(sphere);

// 光源
const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

// 射线检测逻辑
const mousePosition = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
window.addEventListener("mousemove", (event) => {
  // 修正鼠标坐标转换：Three.js Y轴与屏幕Y轴方向相反
  mousePosition.x = (event.clientX / window.innerWidth) * 2 - 1;
  mousePosition.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mousePosition, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  
  // 默认恢复球体白色
  sphere.material.color.set(0xFFFFFF);
  
  // 检查是否命中球体
  for (const intersect of intersects) {
    if (intersect.object === sphere) {
      intersect.object.material.color.set(0xFF0000);
      break; // 找到目标后跳出循环，提升效率
    }
  }
});

// 动画逻辑
let step = 0;

const animate = (time: number) => {
  step += 0.01;
  sphere.position.y = 4 * Math.abs(Math.sin(step + 1));

  renderer.render(scene, camera);
};

renderer.setAnimationLoop(animate);

关键修改说明 #

1. 调整相机初始化顺序：将camera创建移到mousemove事件监听之前，确保事件触发时相机已完成配置。
2. 修正鼠标坐标Y轴方向：Three.js坐标系Y轴向上，屏幕Y轴向下，需对鼠标Y坐标取反，否则射线检测方向会颠倒。
3. 修复颜色值格式：将字符串格式的颜色值改为十六进制数值，避免解析错误。
4. 添加颜色恢复逻辑：每次检测前重置球体颜色为白色，确保鼠标离开时颜色正常。

关于Raycasting支持移动物体的说明 #

Raycasting完全支持检测移动物体，只要通过Three.js标准属性（position/rotation/scale）修改物体变换，Three.js会自动标记矩阵需要更新，在渲染或射线检测时自动计算最新矩阵。仅当手动修改matrix或matrixWorld属性时，才需要调用object.updateMatrixWorld()同步矩阵。

内容的提问来源于stack exchange，提问作者Dronius