如何为一组元素创建一个Hitbox？ （Three.js / 3D）

Question

能否请您告诉我为一组元素创建命中盒的最佳方法？我想使用此点击框检查用户点击。

目前，我知道一种检查方法：

1）在元素组的前面创建PlaneBufferGeometry，然后将此对象添加到raycaster.intersectObjects()

此外，我知道有一个Box3可以为所有子元素返回一个box立方体，但是不幸的是，我不知道如何在raycaster中使用它。

单选按钮的示例：

更新1：

我找到了一个临时解决方案：

1. 创建一个Group
2. 创建需要包装的元素 在点击框中
3. 创建一个Box3（或2D的Box2）
4. 使用min / max Box3对象的各个点以查找元素组的边界。

代码示例：

const group = new Group();
const ring = new Mesh(ringGeometry, ringMaterial);
const circle = new Mesh(circleGeometry, circleMaterial);
const text = new Mesh(textGeometry, textMaterial);

group.add(ring, circle, text);

const box = new Box3();
box.setFromObject(group); // { min: Vector3, max: Vector3 }