Add multiple textures of materials to GLTF Mesh

Hi everyone!

I’m having an issue with something that several other people also have asked questions about. I tried out multiple options and tried to learn more about this part of ThreeJS, but I find it pretty hard to wrap my head around.

What I would like to do is load one mesh from a GLTF file and assign multiple textures to, as if they’re layers in Photoshop. As I understand it, multiple textures can only be done by using multiple materials with each their own texture. I also learnt that the only type of geometry that can use multiple materials properly is the BufferGeometry.

I tried out several things with this BufferGeometry but I keep running into problems.

Below is an example of something that I tried: (I am using typescript, by the way)

const loader = new GLTFLoader();
const bufferGeometry = new BufferGeometry();

loader.load(gltfFilePath, (gltf: GLTF) => {

    gltf.scene.children.forEach(child => {

        if (child.type === 'Mesh') {
            /* Using 'as Mesh' and 'as Geometry' here, because otherwise the typings aren't correct and I can't figure out why that is */
            bufferGeometry.fromGeometry((child as Mesh).geometry as Geometry);

            const materials = [
                new MeshBasicMaterial({
                    visible: true,
                    opacity: 1,
                    map: texture1
                }),
                new MeshBasicMaterial({
                    visible: true,
                    opacity: 0.5,
                    map: texture2
                })
            ];

            (child as Mesh).geometry = bufferGeometry;
            (child as Mesh).material = materials;

            group.add(child);
        }
    });            
});

It seems that everytime I add an array of materials, the mesh is not displayed anymore, but I do not get errors in my console. When I just add one material without an array, everything works fine.
But as I understand, I do need a BufferGeometry and the objects from a GLTF file are BufferGeometry by default. So I’m not really sure what I should be doing differently. Am I missing something? Or do I just need to write the code in a different way?

I find it hard to understand how this works, so if there is some source of info about how best to do something like this I would highly appreciate it. :slight_smile: