8

Three.jsを使用してWebGLページに反射する立方体の表面を作成したいと思います。それは、いくらかの光を反射する携帯電話のディスプレイに似ているはずですが、それでも黒でなければなりません。

4

1 に答える 1

24

詳細なコメントを付けて、反射する立方体（および反射する球）の例を作成しました。ライブバージョンは

http://stemkoski.github.com/Three.js/Reflection.html

うまくフォーマットされたコードで

https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Reflection.html

（これは、 http：//stemkoski.github.com/Three.js/にあるチュートリアル例のコレクションの一部です）

主なポイントは次のとおりです。

  • 表面が反射するはずのオブジェクトに配置された2番目のカメラ（CubeCamera）をシーンに追加します
  • マテリアルを作成し、この2番目のカメラからのレンダリングの結果として環境マップを設定します。

例えば：

 var mirrorCubeMaterial = new THREE.MeshBasicMaterial( 
    { envMap: mirrorCubeCamera.renderTarget } );
  • レンダリング機能では、すべてのカメラからレンダリングする必要があります。反射しているオブジェクトを一時的に非表示にして（使用するカメラの邪魔にならないように）、そのカメラからレンダリングしてから、反射オブジェクトを再表示します。

例えば：

mirrorCube.visible = false;
mirrorCubeCamera.updateCubeMap( renderer, scene );
mirrorCube.visible = true;

これらのコードスニペットは、上記のリンクからのものです。それらをチェックしてください！

于 2012-07-06T17:22:42.287 に答える