0

我正在使用 three.js 制作动画我正在尝试在屏幕中心旋转 2 个球体，第一个包含第二个球体（它们具有相同的坐标，但一个稍大一些）。我正在尝试用大气模拟一个逼真的地球仪。

我从添加大气的 three.js 地球示例开始http://www.gioblu.com/GiO/web/solarsystem/index_old

之后，我从头开始编写所有内容，以建立一个渲染许多行星及其大气的框架。

http://www.gioblu.com/GiO/web/solarsystem/index_backup 但是，正如您所看到的，我的代码中有一个错误，可以避免正确的纹理加载。从物质内部看，似乎一切都在里面。我想我是在加载纹理之前在场景中添加项目。但是我找不到一种方法来编辑代码以使其工作..

我希望有一个好的答案；）

4

1 回答 1

0

纹理加载完成后创建 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 );
    }

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

于 2013-07-28T09:42:12.950 回答