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

，但应该是正确的。