Three.js 如何将多个纹理应用于GLTF模型？

我尝试将纹理应用于模型，但它仅适用于单个纹理。使用多个纹理时，不会显示模型

具有单个纹理的示例代码：

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

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

具有多重纹理的示例代码：

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

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

---

不能将数组指定给材质。我想你把它和我的名字混淆了。假设您的模型仅由4个网格组成，则此操作应该有效

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

---

这四种纹理的效果如何？它们是否都是部分透明的，并且应该堆叠在彼此的顶部？或者不同的纹理应该应用于模型的不同部分？请注意，一旦加载了模型，模型最初的格式就无关紧要了。这只是一个

THREE.Mesh

，通常的threejs文档中关于材质、贴花和自定义着色器的内容都适用。尽管有一个例外，您可能希望纹理上显示

flipY=false

。