尝试加载纹理显示没有错误，但纹理不显示

Question

我有一个模型，一个背景天空和一个地面。对表面进行纹理处理会导致没有表面。

我已经尝试了基本方法并得出结论，可能是场景在纹理加载完成之前正在渲染。在搜索并找到各种可能的解决方案之后，我尝试了其中的几个，但并没有真正理解它们应该如何工作。 None 其中有效。一个问题是它是一个老问题，大多数建议都涉及 three.js 库的过时版本。

// Ground
// create a textured Ground based on an answer in Whosebug.
   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

上面第一个是完整的页面，其中地面是一个普通的台球table绿色。第二个是包含上述代码的页面。

似乎没有错误（我上次试过。）

Answer 1

在加载纹理并添加地面时，场景已经渲染完毕（并且没有其他渲染调用）。
添加地面到场景后需要调用renderer.render(scene, camera);

// Ground
// create a textured Ground based on an answer in Whosebug.
   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  
      }
   );

尝试加载纹理显示没有错误，但纹理不显示

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

textures

three.js

delayed-loading