Search code examples
three.js3dgltf

Loading gltf/glb without textures/colors issue using GLTF loader

First of all - I AM A BEGINNER in Three.js. By creating this question I want to leave the information on how to solve that issue when loaded gltf models do not have textures. enter image description here

const loader = new GLTFLoader();
loader.load(
    // resource URL
    // PVPanelDataURI,
    process.env.PUBLIC_URL + 'staticPresets/PVPanel.gltf',
    (gltf) => {
        this.scene.add(gltf.scene);
        console.log('gltf', gltf)
    },
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function(error) {
        console.log('An error happened: ', error);
    }
);

Also, I would like to get rid of that warning: enter image description here

I will be grateful for the answer.

Solution

  • There are a lot of reasons for that. You can even have a broken GLTF file sometimes. But if you are lucky then you need to create light for your model and all will be alright!

    const ambientLight = new AmbientLight(0xFFFFFF);
ambientLight.intensity = 4;
this.scene.add( ambientLight );

    enter image description here

    Notice that sometimes intensity must be significant and light should be different. I used

    const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.intensity = 10;
spotLight.position.set( 1000, 1000, 1000 );

    to be able to see the black surface of my model. Also, you may need to navigate around on a canvas to see the difference. enter image description here