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.)

score 0 · Accepted Answer · answered Jul 28 '19 at 00:52

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

Thank you! (I'm not supposed to say this). It works but I may need to do some tiling. There are now no shadows. Am I expecting too much? Do I have to invoke an overlay of ShadowMaterial or something like that? — Lawrie Hodges, Jul 28 '19 at 13:38
do a search on stack for threejs shadows and take a look at the three.js examples. But I can see you have the line `renderer.shadowMap.enabled;`, you need to set it to true. `renderer.shadowMap.enabled = true;`. Please accept the answer if it helped you. — 2pha, Jul 28 '19 at 22:47

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

1 Answers1