three.js 场景中检测直线相交的所有立方体对象的实现方法

核心思路 #

直接使用Three.js内置的Raycaster射线检测工具实现需求，无需手动实现底层相交计算：将连接两个立方体的线段转化为限定了最大检测距离的射线，直接批量检测场景内的立方体对象即可得到所有相交的目标。 #

可直接复用的代码片段 #

// 假设你已经拿到两个选中的立方体对象 cube1、cube2，以及场景内所有立方体的数组 allCubes

// 1. 获取两个立方体的世界坐标（避免父级偏移导致坐标错误）
const startPoint = new THREE.Vector3()
const endPoint = new THREE.Vector3()
cube1.getWorldPosition(startPoint)
cube2.getWorldPosition(endPoint)

// 2. 构造限定范围的射线：起点为第一个立方体坐标，方向指向第二个立方体，最大距离为两点间距
const rayDirection = new THREE.Vector3().subVectors(endPoint, startPoint).normalize()
const lineDistance = startPoint.distanceTo(endPoint)
const raycaster = new THREE.Raycaster(startPoint, rayDirection, 0, lineDistance)

// 3. 执行相交检测，第二个参数传true表示递归检测嵌套子元素
const intersectResults = raycaster.intersectObjects(allCubes, true)

// 4. 对结果去重（同一个立方体可能被检测到穿入、穿出两次）
const hitCubes = [...new Set(intersectResults.map(res => res.object))]

// 5. 执行高亮逻辑，示例为修改立方体材质颜色
hitCubes.forEach(cube => {
  cube.material = new THREE.MeshBasicMaterial({ color: 0xff3333 })
})

注意事项 #

• 如果你的立方体使用了自定义几何体，检测前需手动调用cube.geometry.computeBoundingBox()计算包围盒，否则可能出现检测失效
• 若场景内立方体数量超过1000个，建议提前做八叉树空间划分优化检测性能，避免每一次检测遍历全量立方体造成卡顿
• 如果你需要精确判断线段是否完全穿过立方体而非仅碰到边角，可以额外判断射线和立方体的相交次数，相交次数≥2即为完全穿过

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