射线检测BufferGeometry时如何获取相交面？

刚好处理过不少Three.js射线检测的场景，来帮你拆解下你拿到的这份相交数据——这些字段在做3D交互（比如模型拾取、碰撞判断）的时候都是核心信息：

首先先把你拿到的原始数据贴出来方便对照：

{ 
  distance: 494.77924415158327, 
  face: Face3 {a: 732, b: 733, c: 734, normal: Vector3, vertexNormals: [], …}, 
  faceIndex: 732, 
  index: 732, 
  object: Mesh {id: 16, uuid: "F1E299F1-927D-4CD8-ACF6-3A5AA528EACD", name: "collide_main", type: "Mesh", parent: Group, …}, 
  point: Vector3 {x: -3.025193341955971, y: 2.63172597487887, z: -4.237102099257478, isVector3: true, …}, 
  uv: Vector2 {x: 0.4...}
}

关键字段逐个解析 #

• distance：射线起点到相交点的直线距离，单位和你的3D场景单位一致。如果一次射线检测命中多个对象，这个值可以用来筛选离射线源最近的那个。
• face & faceIndex：
  • face是射线命中的三角面（Face3对象），里面的a/b/c对应该三角面三个顶点在几何体顶点数组中的索引；normal是这个面的法向量，做光照计算、碰撞响应时会用到。
  • faceIndex是这个三角面在几何体面集合中的索引，对于BufferGeometry来说，虽然底层用缓冲区存储顶点数据，但射线检测会自动封装成Face3方便你快速访问面信息。
• object：命中的Mesh对象本身，通过它你能操作模型的所有属性——比如object.name能看到这个模型叫collide_main，object.parent可以找到它的父级Group，还能直接修改它的材质、位置、缩放等。
• point：世界空间下的精确相交坐标（Vector3），这是射线和三角面的交点位置，你可以用它来放置交互标记、计算模型间的偏移量等。
• uv：相交点在模型UV贴图上的坐标（Vector2），如果需要做纹理拾取（比如获取点击位置的纹理颜色）、局部材质修改，这个值就是关键依据。

简单应用示例 #

比如你想在相交点生成一个红色小球做标记，可以这么写：

// 假设已引入Three.js，且scene是你的场景对象
const hitMarker = new THREE.Mesh(
  new THREE.SphereGeometry(0.1), // 小球大小
  new THREE.MeshBasicMaterial({ color: 0xff0000 }) // 红色材质
);
hitMarker.position.copy(intersectResult.point); // 把相交点设为小球位置
scene.add(hitMarker);

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