Three.js射线投射同步执行异常：需异步等待才获正确原点

核心问题 #

你遇到的现象是因为Three.js的对象世界矩阵默认不会立即更新——相机的位置、旋转等属性修改后，其世界坐标（用于射线计算的实际位置）只会在渲染帧的自动更新流程中同步。立即执行射线投射时，相机的matrixWorld还是旧值（初始的(0,0,0)），导致射线原点错误；延迟执行时，渲染循环已经完成了世界矩阵的更新，所以结果正确。

另外你的cast方法里存在冗余代码，反而可能干扰射线的正确计算。

具体修复步骤 #

1. 手动更新相机世界矩阵
   在完成相机所有属性设置（包括位置、旋转、四元数、投影矩阵）后，手动调用camera.updateMatrixWorld(true)，强制同步相机的世界坐标到最新状态。

2. 移除冗余的射线原点赋值
   Raycaster.setFromCamera()方法会自动根据相机的世界矩阵计算射线的原点和方向，你手动赋值raycaster.ray.origin = this.camera.position.clone()完全多余，而且camera.position是本地位置而非世界位置，这会导致计算错误。

修改后的代码 #

主逻辑代码：

camera.fov = s.fieldOfViewDeg[1]; //top to bottom
camera.position.set(0, 0, 0)
camera.rotation.set(0, 0, 0) //the quaternion is relative and not absolute, so a reset is needed
camera.applyQuaternion(new THREE.Quaternion(...q))

camera.translateZ(15)
camera.updateProjectionMatrix();
// 新增：强制更新相机世界矩阵
camera.updateMatrixWorld(true);

const plane = new THREE.PlaneGeometry(10, 10);
const world = new THREE.Mesh(plane, await materials.getBasicMat());
world.rotation.x = -Math.PI / 2
world.position.y = (3.432 / 2) - 0.0001
scene.add(world)

new Raycaster(camera).cast(0, 0, [world])
// 现在不需要setTimeout也能得到正确结果
// setTimeout(() => {
//     new Raycaster(camera).cast(0, 0, [world])
// }, 100)

Raycaster的cast方法：

cast(x: number, y: number, objects: any[]) {
    const raycaster = new THREE.Raycaster();
    // 移除冗余的原点赋值代码
    raycaster.setFromCamera(new THREE.Vector2(x, y), this.camera)
    const intersects = raycaster.intersectObjects(objects, false)
    console.log(intersects)
}

补充说明 #

Three.js中，所有场景对象的matrixWorld（世界矩阵）默认是延迟更新的，只有在以下情况才会自动更新：

• 触发渲染循环（renderer.render(scene, camera)）
• 手动调用object.updateMatrixWorld(true)（true表示强制更新所有父对象的矩阵）

当你在渲染前手动修改相机属性后，必须手动触发世界矩阵更新，才能让射线投射等依赖世界坐标的操作得到正确结果。

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