Three.js中raycaster.intersectObjects返回错误结果的求助

我看了你的代码，发现问题大概率是材质的面渲染设置导致Raycaster无法检测到立方体的背面，或者是物体矩阵未更新引发的检测错误。下面是具体分析和解决方案：

问题分析 #

你的射线从(0.5,0.5,-1)出发，指向位于(0,0,3)的立方体，理论上应该在(0.125, 0.125, 2)处命中立方体的z=2面，但Three.js默认的MeshPhongMaterial只渲染正面（THREE.FrontSide）——也就是法线方向与射线方向夹角小于90度的面。虽然你的射线确实射向z=2面，但这个面的法线朝向-z方向，和射线的+z方向夹角为180度，默认会被视为背面而忽略，导致Raycaster找不到有效交点，反而错误返回了起点（这是部分Three.js版本中，未检测到正面交点时的异常表现）。

另外你预期的碰撞点(0.5,0.5,2)其实并不准确：因为射线方向是从(0.5,0.5,-1)指向(0,0,3)，x和y分量是负方向，所以当射线到达立方体z=2的面时，x和y会偏移到0.125，这点需要注意。

解决方案 #

这里有几个优先级从高到低的修复步骤：

1. 将材质设置为双面渲染

修改材质定义，添加side: THREE.DoubleSide，让Raycaster同时检测正反两面的面：

var material_blue = new THREE.MeshPhongMaterial({ 
    color: 0x0000ff, 
    specular: 0x000000, 
    shininess: 10,
    side: THREE.DoubleSide // 关键修改：启用双面渲染
});

2. 手动更新物体的世界矩阵

在调用intersectObjects前，确保立方体的矩阵已更新（Three.js在渲染时会自动更新，但如果在渲染前检测碰撞，可能需要手动触发）：

cube.updateMatrixWorld(); // 确保矩阵状态同步
let intersects = raycaster.intersectObjects(collidableMeshList);

3. 使用Raycaster.set()方法替代构造函数

虽然理论上和构造函数效果一致，但显式调用set方法可以避免初始化时的潜在问题：

let raycaster = new THREE.Raycaster();
raycaster.set(orig_pos, dir.clone().normalize()); // 显式设置射线起点和方向

修改后的完整代码 #

var material_blue = new THREE.MeshPhongMaterial({ 
    color: 0x0000ff, 
    specular: 0x000000, 
    shininess: 10,
    side: THREE.DoubleSide // 添加双面渲染
}); 
var dest_pos = new THREE.Vector3(0, 0, 3); 
cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), material_blue); 
cube.position.set(dest_pos.x, dest_pos.y, dest_pos.z); 
scene.add(cube); 

var collidableMeshList = [] 
collidableMeshList.push(cube) 

var orig_pos = new THREE.Vector3(0.5, 0.5, -1); 
let dir = dest_pos.clone(); 
dir.sub(orig_pos); 
console.log("dir: " + dir.x + ", " + dir.y + ", " + dir.z) 

let raycaster = new THREE.Raycaster();
raycaster.set(orig_pos, dir.clone().normalize()); // 显式设置射线参数

cube.updateMatrixWorld(); // 更新物体矩阵
let intersects = raycaster.intersectObjects(collidableMeshList); 

console.log(intersects); 
console.log("intersects.length = " + intersects.length); 
if (intersects.length > 0) { 
    console.log("intersects[0].point: (" + intersects[0].point.x + ", " + intersects[0].point.y + ", " + intersects[0].point.z + ")") 
}

验证结果 #

修改后，你会得到正确的碰撞点(0.125, 0.125, 2)，这是射线参数方程计算的准确结果——因为射线方向同时向x、y负方向偏移，所以碰撞点的x、y不会保持0.5。

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