Texture not loading even after running file through local server

Question

Texture loading as black. I tried running the.html file through a local server (Servez) but that does not seem to be the issue. I am using visual studio code. The code seems to work fine, the console does not show any errors.

This is my code:

window.onload = function() {

    //Define the WebGL renderer:

    var renderer = new THREE.WebGLRenderer(); //specify the we will use WebGL
    renderer.setSize( 800, 600 ); //scene size (Width, Height)
    document.body.appendChild( renderer.domElement );


    //Initialize (create) the scene:

    var scene = new THREE.Scene();


    //Define the camera:

    var camera = new THREE.PerspectiveCamera(
        35,             // Field of view
        800 / 600,      // Aspect ratio
        0.1,            // Near plane
        10000           // Far plane
    );
    camera.position.x= 0;  //default value anyway
    camera.position.y= 0;  //default value anyway
    camera.position.z = 300;
    camera.lookAt( scene.position );


    //Define the objects for the scene:

   var skygeo = new THREE.SphereGeometry(150, 40, 20);
   var skytexture = new THREE.TextureLoader().load("sky.jpg");
   var skymat = new THREE.MeshBasicMaterial({map:skytexture});
   skymat.side = THREE.Backside;
   var skydome = new THREE.Mesh(skygeo, skymat);
   scene.add(skydome);

    // create a point light:
    var pointLight = new THREE.PointLight(0xFFFFFF);
    // set the light position:
    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 100;
    // add the light to the scene:
    scene.add(pointLight);

    // it renders the scene:
    renderer.render( scene, camera );

};

I found here(https://discourse.threejs.org/t/texture-loading-not-working-on-server/14910/10) that it may be because the image files were corrupted. I also found somewhere else that it may be because of browser extensions like AdBlock, but removing extensions did not fix it.

What is the reason for this?

Answer 1

You're calling renderer.render( scene, camera ); only once, immediately after initializing your texture loader. Texture loading is asynchronous, it takes some time, so you're rendering the scene before the texture has loaded. You need to call render after your texture has finished loading. To do this you can use the onLoad callback, or you could see the basic docs on creating a scene for an example on how to render continuously:

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