THREE 导入模型 后 group转成mesh

有个需求，ui设计了一个层级模型，导入的时候是group的模型，在我们要渲染同个模型多次的时候，需要对mesh进行操作，所以有了group转mesh的需求，代码如下

  import * as THREE from 'three';
  import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils';

    gltfLoader.load('/public/bookshelf2.glb', (gltf) => {
      let dae = gltf.scene;
      console.log(dae, 'dae');

      let geometryArray = []; // 将你的要合并的多个geometry放入到该数组
      let materialArray = []; // 将你的要赋值的多个material放入到该数组
      dae.traverse((child) => {
        if (child instanceof THREE.Mesh) {
          // 创建一个新的网格对象，并复制原来group中的模型数据
          let matrixWorldGeometry = child.geometry.clone().applyMatrix4(child.matrixWorld);
          // 将新的Mesh添加到新的Scene中
          geometryArray.push(matrixWorldGeometry);
          materialArray.push(child.material);
        }
      });
      // 合并模型
      const mergedGeometries = BufferGeometryUtils.mergeGeometries(geometryArray, true);
      const singleMergeMesh = new THREE.Mesh(mergedGeometries, materialArray);
      //singleMergeMesh 书架的模块
      console.log(singleMergeMesh, 'singleMergeMesh');

      // scene.add(singleMergeMesh);
      const meshes = new THREE.InstancedMesh(singleMergeMesh.geometry, singleMergeMesh.material, 10);
      const matrix = new THREE.Matrix4();

      for (let index = 0; index < 10; index++) {
        matrix.setPosition(2 * index, 2 * index, 30); //-4.5 ~ 4.5
        meshes.setMatrixAt(index, matrix);
      }
      console.log(meshes, 'meshes');
      scene.add(meshes);
    });

如果是单个模型导入，模型自然就是mesh模型，那我们只需要循环模型的第一个cheldren， 然后每个添加位置即可代码如下

     gltfLoader.load('/public/desk1.glb', (gltf) => {
      let dae = gltf.scene.children[0];
      console.log(gltf, dae, dae.geometry, dae.material, 'dae.geometry, dae.material');
      const meshes = new THREE.InstancedMesh(dae.geometry, dae.material, 10);
      const matrix = new THREE.Matrix4();

      for (let index = 0; index < 10; index++) {
        matrix.setPosition(2 * index, 2 * index, 30); //-4.5 ~ 4.5
        meshes.setMatrixAt(index, matrix);
      }
      console.log(meshes, 'meshes');
      scene.add(meshes);
    });