Three.js Raycaster添加立方体后无法立即更新交点问题求助

问题根源 #

移除模式正常是因为删除物体后你大概率主动触发了Raycast检测，而添加模式下，新立方体加入场景后没有强制触发一次完整的Raycast计算，只能等待鼠标移动事件触发检测，导致指示器延迟更新。另外要确认新立方体是否被纳入Raycaster的检测范围。

解决方案 #

1. 确保新立方体被纳入检测范围 #

如果你的Raycaster是通过raycaster.intersectObjects(blocksArray)指定检测数组的，必须把新添加的立方体push到这个数组里：

// 添加新立方体时
const newBlock = new THREE.Mesh(geometry, material);
newBlock.position.copy(indicator.position);
scene.add(newBlock);
// 关键：加入检测数组
blocksArray.push(newBlock);

如果用的是raycaster.intersectScene(scene)，则只需确保新立方体已添加到场景即可（这一步你应该已经完成）。

2. 添加后强制触发Raycast检测 #

移除checkIntersection中仅当鼠标位置变化才执行计算的逻辑（如果有的话），确保只要调用就重新计算射线交点。然后在添加立方体的pointerup事件末尾，立即调用checkIntersection：

// 假设全局存储了当前鼠标位置mouse（THREE.Vector2）
window.addEventListener('pointerup', (event) => {
  if (currentMode === 'add') {
    // ...创建并添加新立方体的逻辑...
    
    // 更新当前鼠标位置（避免使用旧值）
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    
    // 强制触发检测，更新指示器
    checkIntersection();
  }
  // ...移除模式逻辑...
});

3. 修正checkIntersection函数 #

确保函数每次调用都重新计算射线，不要做鼠标位置变化的判断：

function checkIntersection() {
  raycaster.setFromCamera(mouse, camera);
  // 用检测数组或场景都可以
  const intersections = raycaster.intersectObjects(blocksArray);
  // const intersections = raycaster.intersectScene(scene);
  
  // 更新指示器位置逻辑
  if (intersections.length > 0) {
    const hit = intersections[0];
    if (currentMode === 'add') {
      // 添加模式下，指示器放在相邻的网格位置
      indicator.position.copy(hit.point)
        .add(hit.normal)
        .multiplyScalar(1)
        .floor()
        .addScalar(0.5);
    } else {
      indicator.position.copy(hit.object.position);
    }
    indicator.visible = true;
  } else {
    indicator.visible = false;
  }
}

为什么之前的临时方法没用？ #

你之前在pointerup调用checkIntersection无效，大概率是因为函数内部有鼠标位置变化的判断（比如和上一次位置对比，没变就跳过计算），或者没有更新当前鼠标位置就调用，导致用了旧的射线参数，无法检测到新立方体。

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