Question

我正在制作一个带有three.js的动画我想在屏幕中央旋转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.atmosphere_material仍未定义，因此使用了基本材料。

在您的加载器功能中，您遇到了可能导致此问题的范围错误：

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

我没有测试过代码，但应该是正确的。

Three.js纹理加载失败

1 个答案: