尝试加载纹理未显示错误，但未显示纹理

Question

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

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

// 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

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

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

Answer 1

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

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