三个JS纹理未显示

Question

我正在尝试使用三个JS将纹理应用到我的3D模型。我尝试了三个JS示例中的许多方法，但由于任何原因，都不起作用。

下面是我如何将纹理应用于我的模型：

    //LOADING TEXTURE

    var textureLoader = new THREE.TextureLoader();

    var diffuse = textureLoader.load( "models/Carbon.png" );
    diffuse.encoding = THREE.sRGBEncoding;
    diffuse.wrapS = THREE.RepeatWrapping;
    diffuse.wrapT = THREE.RepeatWrapping;
    diffuse.repeat.x = 1;
    diffuse.repeat.y = 1;

    var normalMap = textureLoader.load( "models/Carbon_Normal.png" );
    normalMap.wrapS = THREE.RepeatWrapping;
    normalMap.wrapT = THREE.RepeatWrapping;


    var material = new THREE.MeshPhysicalMaterial({
        roughness: 0.5,
        clearcoat: 1.0,
        clearcoatRoughness: 0.1,
        map: diffuse,
        normalMap: normalMap
    });

// LOADING MODEL

    var loader = new THREE.GLTFLoader();

    loader.load("models/stairs.gltf", function(gltf){
        model = gltf.scene

        model.traverse((newModel) => {
            if (newModel.isMesh){
                newModel.material = material;
                newModel.castShadow = true;
                newModel.receiveShadow = true;
            }
        });

        scene.add(model);
    });

感谢大家的帮助！

Answer 1

为glTF模型加载纹理时，必须将Texture.flipY设定为false以满足glTF的uv约定。

diffuse.flipY = false;
normalMap.flipY = false;

此外，您必须始终确保您的模型具有纹理坐标。可以通过检查网格的几何体是否具有uv属性来执行此操作。如果缺少此属性，我建议您在像Blender这样的DCC工具中生成纹理坐标。

three.js R112