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 プロパティが Earth オブジェクトに設定されていません。このコールバックでは、スコープが異なります。以下は、テクスチャをロードする簡単な方法です。

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 に答える