In scene.gltf file "images" for textures won't load in the browser using GLFLoader

Hi, I’m new to three.js and I’m having this issue with the textures, which are related in a scene.gltf file, the textures won’t load properly at the browser, just like this:

Also checked in the gltf viewer and looks fine:

I’m using these scripts: GTLFLoader.js , three.js, OrbitControls.js

the sketch is Low Poly Car - Chevrolet C10 Pickup 1963 - Download Free 3D model by tedpermana (@tedpermana) [679354c] - Sketchfab

The code I’m trying:

  • main.js
let scene, camera, renderer;
function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xCACACA);

    camera = new THREE.PerspectiveCamera(40,window.innerWidth / window.innerHeight,1,5000);
    camera.rotation.y = 45/180*Math.PI;
    camera.position.x = 800;
    camera.position.y = 100;
    camera.position.z = 1000;

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', renderer);

    hlight = new THREE.AmbientLight (0xffffff, 3);
    scene.add(hlight);

    directionalLight = new THREE.DirectionalLight(0xffffff, 5);
    directionalLight.position.set(0,1,0);
    directionalLight.castShadow = true;
    scene.add(directionalLight);

    hemiLight = new THREE.HemisphereLight( 0x0000ff, 0x00ff00, 0.6 ); 
    hemiLight.position.set(100,10,100);
    scene.add(hemiLight);

    light = new THREE.PointLight(0xffffff,10);
    light.position.set(0,300,500);
    scene.add(light);

    light3 = new THREE.PointLight(0xffffff,8);
    light3.position.set(0,10,-50);
    scene.add(light3);

    let loader = new THREE.GLTFLoader();
    loader.load('src/scene.gltf', function ( gltf ) {
        car = gltf.scene.children[0];
        car.scale.set(1,1,1);
        scene.add(gltf.scene);
    },  undefined, function ( error ) {
        console.error( error );
    });
    animate();
}

function animate() {
    requestAnimationFrame( animate );
    renderer.render(scene,camera);
    renderer.physicallyCorrectLights = true;
}

function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false)

init();
  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <script src="src/three.js"></script>
    <script src="src/GLTFLoader.js"></script>
    <script src="src/OrbitControls.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Thanks in advance kind souls!

I’m not sure why developer tools don’t show the texture previews, but the textures do appear to be rendering on the model itself. The reason the lighting is so different is that you need an environment map for reflections. Without an environment map it will look the same in my viewer too:

2 Likes