Three.js使用Raycaster检测与BoxBufferGeometry交点失败问题排查

错误原因 #

• Raycaster.set()方法第二个参数要求传入归一化的射线方向向量，你当前代码直接传入了终点坐标，不符合入参要求，导致射线方向不符合预期。
• raycaster.intersectObjects()第一个入参要求传入待检测3D对象的数组，你直接传入单个Mesh对象，导致检测逻辑无法正常执行。

修正后代码 #

const ggeo = new THREE.BoxBufferGeometry(100, 200, 60);
const gmesh = new THREE.Mesh(ggeo, new THREE.MeshBasicMaterial({ color: 0x00ffff}));
gmesh.position.set(-150, 0, -30);
gmesh.visible = true;
gmesh.updateMatrixWorld();
scene.add(gmesh);

// 交点检测逻辑
var from = new THREE.Vector3(-10, 0, -10);
var targetPoint = new THREE.Vector3(-200, 0, -10);
// 计算归一化方向向量
var direction = targetPoint.clone().sub(from).normalize();
var raycaster = new THREE.Raycaster();
raycaster.set(from, direction);
// 首个参数传入物体数组
var intersects = raycaster.intersectObjects([gmesh], true);
if (intersects.length > 0) {
      // 可正常进入该分支获取交点
      console.log('交点坐标：', intersects[0].point);
}

补充说明 #

如果你需要检测的是from到targetPoint的有限线段范围内的交点，可额外添加射线距离限制：

// 设置射线检测的最近、最远距离
raycaster.near = 0;
raycaster.far = from.distanceTo(targetPoint);

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