如何将多个纹理应用于 GLTF 模型

Question

我试图将纹理应用于模型，但它仅适用于单个纹理的情况。对于多个纹理，不会显示模型。

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

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

Answer 1

不能为材质指定数组。我认为您将它与立方体纹理混淆了。假设您的模型仅由 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);
});