THREE.js - Merging / Instancing Multiples of The Same GLTF Model, Without Shader Material..?

问题

I am using the code below to load and clone a GLTF model. In practice this works, however it is way too resource heavy and the model is around a 2mb. It has no textures and the materials are a single MeshPhongMaterial.

I understand two ways to optimise this are to merge them into one mesh instead of cloning, however following numerous attempts (such as iterating within the load function with a for loop), I haven't been able to successfully do this. The second being instancing, however from a number of examples I understand this requires a shader material to handle to the attributes.

I'm a little out of my depth here and would massively appreciate any assistance.

Many thanks!

    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);

来源：https://stackoverflow.com/questions/61578019/three-js-merging-instancing-multiples-of-the-same-gltf-model-without-shader