Three.js紋理加載失敗

Question

我正在用three.js製作一個動畫我是triyng在屏幕中心旋轉2個球體，第一個包含第二個球體（它們有相同的座標，但有一個比較大）。我試圖用大氣模擬一個現實的地球地球。

我開始與three.js所地球地球例如添加大氣http://www.gioblu.com/GiO/web/solarsystem/index_old

之後，我寫了一切從頭開始有一個框架，使許多行星和它們的大氣..

http://www.gioblu.com/GiO/web/solarsystem/index_backup 但，正如你所看到的，我的代碼中存在一個錯誤，它會避免正確的紋理加載。看內部物質對象，似乎都在裏面。我想我在加載紋理之前在場景中添加項目。但我無法找到一個方法來編輯代碼讓它工作..

我希望能在一個很好的答案;）

Answer 1

您創建MeshPhongMaterial當紋理加載完畢。然而，在加載紋理之前，網格已經被創建。由於此大氣層材料仍未定義，因此使用基本材料。

在您的裝載機功能，您已經有了一個範圍錯誤，可能會導致這樣的問題：

 this.loader.load('app/textures/atmospheres/earth_1.jpg', function (texture) { 
     this.atmosphere_material = new THREE.MeshPhongMaterial({ 
      map: texture, 
      color: 10790052, 
      ambient: 16777215, 
      emissive: 1381653, 
      specular: 16777215, 
      shininess: 5000, 
      opacity: 0.46, 
      transparent: true, 
      wireframe: false 
     }); 
     }); 

的this.atmosphere_material屬性未設置在地球對象。在這個回調中，範圍是不同的。以下是加載紋理更簡單的方法：我還沒有測試的代碼

var Earth = function() { 

     this.planet = new THREE.Object3D(); 
     this.planet_geometry = new THREE.SphereGeometry(200, 32, 32); 

     this.atmosphere = new THREE.Object3D(); 
     this.atmosphere_geometry = new THREE.SphereGeometry(205, 32, 32); 

     this.material = new THREE.MeshPhongMaterial({ 
      map: THREE.ImageUtils.loadTexture("app/textures/surfaces/earth.jpg"), 
      color: 13750737, 
      ambient: 13092807, 
      emissive: 595494, 
      specular: 3223857, 
      shininess: 25, 
      opacity: 1, 
      transparent: false, 
      wireframe: false, 
     }); 

     this.surface = new THREE.Mesh(this.planet_geometry, this.material); 
     this.planet.add(this.surface); 
     scene.add(this.planet); 


     this.atmosphere_material = new THREE.MeshPhongMaterial({ 
      map: THREE.ImageUtils.loadTexture("app/textures/atmospheres/earth_1.jpg"), 
      color: 10790052, 
      ambient: 16777215, 
      emissive: 1381653, 
      specular: 16777215, 
      shininess: 5000, 
      opacity: 0.46, 
      transparent: true, 
      wireframe: false 
     }); 

     this.surface = new THREE.Mesh(this.atmosphere_geometry, this.atmosphere_material); 
     this.atmosphere.add(this.surface); 
     scene.add(this.atmosphere); 
    } 

，但應該是正確的。