未顯示天空盒紋理

我正在嘗試學習THREE.js，並且無法使簡單天空盒顯示。我已經嘗試了100種不同的東西，但似乎沒有任何作用 - 太少的文檔與許多不同版本的結合讓我完全被束縛住了。我在這裏結束了我的繩索！未顯示天空盒紋理

我認爲這可能與加載圖像所花費的時間有關，但我嘗試了一些「加載器」代碼無濟於事（因爲它似乎沒有做太多）。我願意相信我只是沒有做到「正確的方式」 - 我無法找到適用於當前版本的示例。

<html> 
    <head> <title>Skybox Demo</title> <style>canvas { width: 100%; height: 100% }</style> 
    <body> 
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> 
    <script> 
     var container; 
     var renderer; 
     var cameraCube, sceneCube; 
     var skyboxMesh; 
     var cubeTarget; 

     var mouseX = 0; 
     var mouseY = 0; 
     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 


     init(); 
     animate(); 

     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      cameraCube = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000); 
      sceneCube = new THREE.Scene(); 

      // Load cube textures 
      var path = "textures/cube/"; 
      var format = '.jpg'; 
      var urls = [ path + 'px' + format, path + 'nx' + format, 
         path + 'py' + format, path + 'ny' + format, 
         path + 'pz' + format, path + 'nz' + format ]; 
      var skyCubeTexture = THREE.ImageUtils.loadTextureCube(urls); 
      skyCubeTexture.format = THREE.RGBFormat; 


      // Cube shader 
      var shader = THREE.ShaderUtils.lib["cube"]; 
      shader.uniforms["tCube"].texture = skyCubeTexture; 
      var material = new THREE.ShaderMaterial({ 
       fragmentShader : shader.fragmentShader, 
       vertexShader : shader.vertexShader, 
       uniforms  : shader.uniforms, 
       depthWrite  : false, 
       side   : THREE.BackSide 
      }); 

      var skyboxMesh = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), material); 
      sceneCube.add(skyboxMesh); 

      // Renderer 
      renderer = new THREE.WebGLRenderer({antialias:true}); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      renderer.autoClear = false; 
      container.appendChild(renderer.domElement); 
     } 


     function animate() { 
      render(); 
      requestAnimationFrame(animate); 
     } 

     function render() { 
      var timer = - new Date().getTime() * 0.0002; 
      cameraCube.position.x = 10 * Math.cos(timer); 
      cameraCube.position.z = 10 * Math.sin(timer); 
      cameraCube.lookAt({x:0, y:0, z:0}); 
      renderer.clear(); 
      renderer.render(sceneCube, cameraCube); 
     } 
    </script> 
    </body> 
</html>

來源

2012-12-06 sarcastodon

要非常小心地從網上覆制示例。

three.js是在alpha中，許多漂浮在網上的例子都是過時的。

最好從「官方」three.js例子開始，因爲它們與當前庫一起工作。

您需要正確分配質地：

shader.uniforms["tCube"].value = skyCubeTexture;

這是最近的變化。

three.js r.53

來源

2012-12-06 19:11:28 WestLangley

完美。是的，這些例子跟不上目前的圖書館，我應該可能確保我匹配圖書館。謝謝！ – sarcastodon

未顯示天空盒紋理

回答

相關問題