THREE.js-合并/实例化同一GLTF模型的倍数,不使用着色器材料。。?

我正在使用下面的代码加载和克隆GLTF模型。在实践中,这是可行的,但资源太多,模型大约为2mb。它没有纹理,材质是单个MeshPhongMaterial。

我知道优化这一点的两种方法是将它们合并到一个网格中,而不是克隆,但是经过多次尝试(例如在加载函数中使用for循环迭代),我一直未能成功做到这一点。第二个是实例化,但从许多示例中我了解到,这需要着色器材质来处理属性。

我在这里有点力不从心,非常感谢任何帮助。

非常感谢!

    loader.load('obj/floor/floor-base-details-base.gltf', (gltf) => {
        floorBaseModel = gltf.scene;
        floorBaseModel.traverse( function ( node ) {
            if ( node.isMesh ) {
                node.castShadow = true;
                node.receiveShadow = true;
                if ( node instanceof THREE.Mesh ) {
                   node.material = base_material;
                }
            }
        });
        for(var i = 0; i < 15; i++){ 
            var floorBaseClone = floorBaseModel.clone();

            offsetPos = (i+1)* -595;
            floorBaseClone.position.set(0,0,offsetPos);
            floorBaseGroup.add(floorBaseClone); 
        }
    });

    floorBaseGroup.scale.set(1,1,1);
    floorBaseGroup.position.set(0,-15,425);
    scene.add(floorBaseGroup);