Three JS texture is not showing up

Question

I am trying to apply a texture to my 3D model with Three JS. I tried a lot of ways from the Three JS Examples but for any reasons nothing is working.

Here is how I apply the texture to my model:

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

I appreciate any help!

Answer 1

When loading a texture for a glTF model, you have to set Texture.flipY to false to satisfy the uv convention of glTF.

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

Besides, you always have to ensure that your model has texture coordinates. You can do this by checking if the geometries of your meshes have an uv attribute. If this attribute is missing, I suggest you generate texture coordinates in a DCC tool like Blender.

three.js R112