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

尝试加载纹理不会显示任何错误，但纹理不会显示

1 个答案: