three.js group

Three.js 中的 Group 是用于将多个对象组合在一起的容器。它类似于 HTML 中的 div 元素，可以将多个子对象放在同一个组中，并对组进行统一的变换、事件处理等操作。

要创建一个 Group 对象，你可以使用以下代码：

const group = new THREE.Group();

然后，你可以将其他对象添加到该组中，例如：

const mesh1 = new THREE.Mesh(geometry1, material1);
group.add(mesh1);

const mesh2 = new THREE.Mesh(geometry2, material2);
group.add(mesh2);

通过将对象添加到组中，你可以同时对这些对象进行变换、旋转、缩放等操作。例如，你可以对整个组进行平移：

group.position.set(10, 0, 0);

或者对组内的所有对象进行统一的旋转：

group.rotation.y = Math.PI / 4;

还可以通过遍历组的子对象来对每个对象进行单独的操作。例如，你可以改变组内所有对象的材质：

group.traverse((object) => {
  if (object instanceof THREE.Mesh) {
    object.material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  }
});

总之，Group 提供了一个方便的方式来管理和操作多个对象，使得在 Three.js 中创建复杂场景变得更加灵活和简便。