未缩放时Three.js Raycaster无法识别小型Label立方体点击问题

问题根源 #

小尺寸立方体在屏幕上的投影像素区域极小，Raycaster的单条射线很容易错过几何体的面；另外原代码依赖faceIndex判断Label类型的逻辑过于脆弱，容易受几何体结构、缩放影响。

可行解决方案 #

1. 给Label添加不可见的放大碰撞盒

创建一个比实际Label大的透明Mesh作为碰撞区域，不渲染但参与射线检测，大幅提升点击命中概率：

// 创建实际显示的小Label
const labelGeo = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const labelMat = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const labelMesh = new THREE.Mesh(labelGeo, labelMat);
// 绑定Label类型到userData，替代faceIndex判断
labelMesh.userData.typename = 'Left';

// 创建放大的不可见碰撞盒
const hitboxGeo = new THREE.BoxGeometry(0.3, 0.3, 0.3); // 尺寸比Label大一圈
const hitboxMat = new THREE.MeshBasicMaterial({ visible: false });
const hitboxMesh = new THREE.Mesh(hitboxGeo, hitboxMat);
// 继承Label的类型信息
hitboxMesh.userData = { ...labelMesh.userData, isHitbox: true };

labelMesh.add(hitboxMesh);
this.scene.add(labelMesh);

修改点击事件逻辑，优先检测碰撞盒：

window.addEventListener('pointerdown', (event) => {
  let templabelarray = [];
  if (this.labels.length > 0) {
    pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(pointer, camera);
    // 递归检测子物体（碰撞盒是Label的子节点）
    const intersects = raycaster.intersectObjects(this.scene.children, true);
    
    for (const hit of intersects) {
      if (hit.object.userData.isHitbox) {
        const targetType = hit.object.userData.typename;
        templabelarray = this.labels.filter(l => l.typename === targetType);
        break;
      }
    }
    // 后续处理详情展示逻辑
  }
});

2. 多射线扩大检测范围

在点击点周围发射多条偏移射线，只要有一条命中Label就算有效点击：

window.addEventListener('pointerdown', (event) => {
  let templabelarray = [];
  if (this.labels.length > 0) {
    const baseX = event.clientX;
    const baseY = event.clientY;
    // 定义点击点周围的偏移像素（可根据需求调整）
    const offsets = [{x:0,y:0}, {x:2,y:0}, {x:-2,y:0}, {x:0,y:2}, {x:0,y:-2}];
    let targetType = null;

    for (const offset of offsets) {
      pointer.x = ((baseX + offset.x) / window.innerWidth) * 2 - 1;
      pointer.y = -((baseY + offset.y) / window.innerHeight) * 2 + 1;
      
      raycaster.setFromCamera(pointer, camera);
      const intersects = raycaster.intersectObjects(this.scene.children);
      
      if (intersects.length > 0) {
        // 从命中物体的userData获取类型（提前给Label Mesh绑定）
        targetType = intersects[0].object.userData.typename;
        break;
      }
    }

    if (targetType) {
      templabelarray = this.labels.filter(l => l.typename === targetType);
    }
    // 后续处理详情展示逻辑
  }
});

3. 自定义射线检测逻辑（基于包围盒）

修改Label Mesh的raycast方法，直接检测几何体的包围盒而非面，只要点击在包围盒的屏幕投影内就判定命中：

// 给每个Label Mesh绑定自定义raycast方法
labelMesh.raycast = function(raycaster, intersects) {
  const boundingBox = new THREE.Box3().setFromObject(this);
  const intersectionPoint = new THREE.Vector3();
  // 判断射线是否与包围盒相交
  if (raycaster.ray.intersectBox(boundingBox, intersectionPoint)) {
    intersects.push({
      object: this,
      distance: raycaster.ray.origin.distanceTo(intersectionPoint),
      point: intersectionPoint.clone()
    });
  }
};

关键优化点 #

• 抛弃faceIndex判断类型的逻辑，改用Mesh.userData存储Label类型，避免几何体结构变化导致逻辑失效。
• 射线检测时使用intersectObjects的第二个参数true，确保递归检测子物体（比如碰撞盒）。

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