How to apply multiple textures to GLTF models? - three.js

Question

I tried to apply the texture to the model, but it works only in the case of a single texture. With multiple textures, the model is not displayed.
Sample code with a single texture:
loader = new THREE.GLTFLoader().setPath('models3/');
const textureLoader = new THREE.TextureLoader();
loader.load('01-Fundament-002.gltf', function (gltf) {
var model = gltf.scene;
model.traverse ( ( o ) => {
if ( o.isMesh ) {
o.material.map = textureLoader.load('models3/Beton OsnovaVRay-DiffuseShadowMap-Edit.png');
}
} );
scene.add(model);
});
Sample code with a multiple texture:
loader = new THREE.GLTFLoader().setPath('models3/');
const textureLoader = new THREE.TextureLoader();
loader.load('01-Fundament-002.gltf', function (gltf) {
var model = gltf.scene;
model.traverse ( ( o ) => {
if ( o.isMesh ) {
const materials = [
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/1.png')}),
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/2.png')}),
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/3.png')}),
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/4.png')}),
];
o.material = materials;
}
} );
scene.add(model);
});

Answer 1

You cannot assign an array to the material. I think you are confusing it with cube texture. This should work assuming your model is made out of 4 meshes only.
var i = 1;
loader = new THREE.GLTFLoader().setPath('models3/');
const textureLoader = new THREE.TextureLoader();
loader.load('01-Fundament-002.gltf', function (gltf) {
var model = gltf.scene;
model.traverse ( ( o ) => {
if ( o.isMesh ) {
o.material = new THREE.MeshBasicMaterial({map: textureLoader.load(`models3/${i++}.png`)});
}
});
scene.add(model);
});