Attempts to load a texture show no error but the texture does not display

Question

I have a model, a background sky and a ground surface. Texturing the surface results in no surface.

I've tried the basic approach and come to the conclusion that it is probably that the scene is being rendered before the texture has finished loading. Having searched and found various possible solutions, I have tried several of them, without really understanding how they are supposed to work. None of them has worked. One problem is that it is an old problem and most of the suggestions involve outdated versions of the three.js library.

// Ground
// create a textured Ground based on an answer in Stackoverflow.
   var loader = new THREE.TextureLoader();
   loader.load('Textures/Ground128.jpg', 
      function (texture) {
         var groundGeometry = new THREE.PlaneBufferGeometry(2000, 2000, 100, 100); 
         const groundMaterial = new THREE.MeshLambertMaterial({map: texture});
         var ground = new THREE.Mesh(groundGeometry, groundMaterial);
         ground.receiveShadow = true;  //Illumination addition
         ground.rotation.x = -0.5 * Math.PI; // rotate into the horizontal.
         scene.add(ground);   
      }
   );      

// This variation does not work either

http://lhodges.users37.interdns.co.uk/me/downloads/Aphaia/Temple.htm http://lhodges.users37.interdns.co.uk/me/downloads/Aphaia/Temple7jsV0.15b.htm

The first of the above is the complete page in which the ground is a plain billiard table green. The second is the page containing the above code.

There appear to be no error (Last time I tried.)

Answer 1

By the time your texture loads and you add the ground, your scene has already rendered (and there is no other render call).
You need to call renderer.render(scene, camera); after adding the ground to the scene.

// Ground
// create a textured Ground based on an answer in Stackoverflow.
   var loader = new THREE.TextureLoader();
   loader.load('Textures/Ground128.jpg', 
      function (texture) {
         var groundGeometry = new THREE.PlaneBufferGeometry(2000, 2000, 100, 100); 
         const groundMaterial = new THREE.MeshLambertMaterial({map: texture});
         var ground = new THREE.Mesh(groundGeometry, groundMaterial);
         ground.receiveShadow = true;  //Illumination addition
         ground.rotation.x = -0.5 * Math.PI; // rotate into the horizontal.
         scene.add(ground); 
         renderer.render(scene, camera); // <--- add this line  
      }
   );