threejs 组-层级模型 | 本地坐标和世界坐标 | 局部坐标系和世界坐标系 | 本地矩阵.materix和世界矩阵.matrixWorld

组- THREE.Group

语法：new THREE.Group()
继承链:Object3D → Group
说明：基本和三维物体Object3D一致,可以看作一个只用于分组没有实体的模型，可以分组操作模型。
作用：可以看作将模型进行分组，原来是直接将一个一个模型add进场景scene，现在是将所有模型先进行分组，然后将分组后的分组模型group添加进场景scene。

受threejs历史原因，有些时候代码中也会直接用Object3D甚至Mesh作为Group使用，可以但不推荐，语义化不够强。

group可以看作mesh1、mesh2的父对象，父对象旋转缩放平移变换，子对象跟着变化(父对象变换子对象也会变换)。

//创建两个网格模型mesh1、mesh2
const geometry = new THREE.BoxGeometry(20, 20, 20);
const material = new THREE.MeshLambertMaterial({
   
   color: 0x00ffff});
// 创建一个组
const group = new THREE.Group();
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
mesh2.translateX(25);
//把mesh1型插入到组group中，mesh1作为group的子对象
group.add(mesh1);
//把mesh2型插入到组group中，mesh2作为group的子对象
group.add(mesh2);
//把group插入到场景中作为场景子对象
scene.add(group);

递归遍历模型树结构object3D.traverse()

语法：object3D.traverse ( callback : Function ) : undefined
本质：遍历object3D实例的children属性

每个模型可以通过object3D.name属性命名，命名之后可以通过遍历模型树搭配object3D.getObjectByName(name) ，找到具体的模型。

案例：假设有一个小区房子
初始化状态小区房子都是蓝色的，需要将所有楼变成黄色

// 批量创建多个长方体表示高层楼
const group1 = new THREE.Group(); //所有高层楼的父对象
group1.name = "高层";
for (let i = 0; i < 5; i++) {
   
   
    const geometry = new THREE.BoxGeometry(20, 60, 10);
    const material = new THREE.MeshLambertMaterial({
   
   
        color: 0x00ffff
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = i * 30; // 网格模型mesh沿着x轴方向阵列
    group1.add(mesh); //添加到组对象group1
    mesh.name = i + 1 + '号楼';
    // console.log('mesh.name',mesh.name);
}
group1.position.y = 30;


const group2 = new THREE.Group();
group2.name = "洋房";
// 批量创建多个长方体表示洋房
for (let i = 0; i < 5; i++) {
   
   
    const geometry = new THREE.BoxGeometry(20, 30, 10);
    const material = new THREE.MeshLambertMaterial({
   
   
        color: 0x00ffff
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = i * 30;
    group2.add(mesh); //添加到组对象group2
    mesh.name = i + 6 + '号楼';
}
group2.position.z = 50;
group2.position.y = 15;

const model = new THREE.Group();
model.name='小区房子';
model.add(group1, group2);</