Three.js Raycaster点击无响应问题求助（附完整代码）

以下是针对你的Raycaster点击失效问题的排查和修复方案，结合GLB模型的特性逐一分析：

1. 检查坐标转换逻辑 #

Raycaster依赖标准化设备坐标（NDC）进行检测，这一步出错是最常见的原因：

• 必须基于渲染画布的实际尺寸计算坐标，而非整个窗口尺寸：

  const mouse = new THREE.Vector2();
  const canvas = renderer.domElement;
  const rect = canvas.getBoundingClientRect();
  
  // 正确的坐标转换
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  

2. 确保GLB模型被纳入检测范围 #

GLB模型是层级结构（THREE.Group），需明确检测规则：

• 调用intersectObjects时，第二个参数设为true以递归检测所有子网格：

  // 检测GLB模型的所有子对象
  const intersects = raycaster.intersectObjects([glbModel], true);
  

• 确认模型及子对象的visible属性为true，未被禁用raycast方法

3. 排查相机视锥体参数 #

相机的near/far范围不合理会导致模型不在射线检测范围内：

• 避免near值过大（比如设为100，但模型在0-50位置），或far值过小
• 确认相机正确对准模型，模型处于相机视野内

4. 材质兼容性检查 #

部分材质设置会影响Raycaster检测：

• 透明材质需确保depthTest和depthWrite设置合理，避免模型被射线忽略
• 不要使用MeshBasicMaterial在无灯光场景下导致模型视觉正常但实际交互失效

5. 事件与渲染循环问题 #

• 点击事件必须绑定到renderer.domElement（渲染画布）上，避免被其他元素遮挡
• Raycaster检测逻辑要放在点击事件回调内，确保每次点击都基于最新场景状态执行

修复后的核心代码示例 #

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let glbModel;

// 加载GLB模型
const loader = new THREE.GLTFLoader();
loader.load('your-model.glb', (gltf) => {
  glbModel = gltf.scene;
  scene.add(glbModel);
});

// 绑定画布点击事件
renderer.domElement.addEventListener('click', handleClick);

function handleClick(event) {
  // 计算标准化坐标
  const rect = renderer.domElement.getBoundingClientRect();
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

  // 更新射线并检测
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects([glbModel], true);

  if (intersects.length > 0) {
    // 触发交互逻辑：显示信息或播放动画
    console.log('点击目标:', intersects[0].object);
    // 示例：播放模型动画
    glbModel.animations.forEach(clip => {
      const action = mixer.clipAction(clip);
      action.play();
    });
  }
}

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