Three.js中Raycaster的threshold属性机制及包围盒选中异常问题

DevOps 小满

2026-7-21

问题描述

我用Three.js的Raycaster实现建筑周围不可见包围盒的选中：

默认设置下，选中的建筑数量过多；
查阅文档后调整Raycaster.params.Line.threshold为0.01，误选问题解决，但出现新问题：点击明显在包围盒内的点时，无法触发选中；
原本以为threshold只是射线的半径，疑惑射线相交检测是否还受其他因素影响，比如与几何体边缘的距离、面的朝向等。

原因分析

你调整的是Line类型的阈值，但THREE.Line的相交检测逻辑和Mesh完全不同：

Raycaster.params.Line.threshold定义的是射线到Line线段的最大垂直距离，不是射线的“半径”。只有当射线与Line的某条线段的最短距离≤这个阈值时，才会判定相交。
Line几何体本质是线段的集合，没有“内部区域”的概念——你眼中的“包围盒内”，对Line来说只是线段围起来的视觉区域，Raycaster不会识别这个区域，只会检测射线和线段的距离。调小threshold到0.01后，只有非常贴近线段的点击才会命中，盒内离所有线段超过0.01的位置自然无法触发选中。

解决方案

方案1：改用Mesh作为包围盒（推荐）

放弃用Line做包围盒，改用BoxGeometry创建透明Mesh：

// 创建透明包围盒Mesh
const boxGeo = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const boxMaterial = new THREE.MeshBasicMaterial({ 
    opacity: 0, 
    transparent: true,
    visible: false // 可选，完全隐藏
});
const boxMesh = new THREE.Mesh(boxGeo, boxMaterial);
building.add(boxMesh); // 挂载到建筑对象下

Mesh的相交检测是基于面的，只要射线穿过Mesh的内部就会判定相交，完全符合“点击盒内就选中”的需求，且不需要调整任何Raycaster参数。