Wie kann ich Reflexion in three.js verwenden?

Question

Ich möchte eine reflektierende Cube-Oberfläche in einer WebGL-Seite mit Three.js haben. Es sollte einem Handy-Display ähneln, das etwas Licht reflektiert, aber immer noch schwarz sein muss.

Answer 1

Ich habe ein Beispiel für einen reflektierenden Würfel (und auch eine reflektierende Kugel) mit detaillierten Kommentaren erstellt. Die Live-Version ist bei

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

mit schön formatierte Code bei

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

(Dies ist Teil einer Sammlung von Tutorial-Beispiele bei http://stemkoski.github.com/Three.js/ ist)

Die wichtigsten Punkte sind:

• Fügen Sie Ihrer Szene eine zweite Kamera (eine CubeCamera) hinzu, die an dem Objekt positioniert ist, dessen Oberfläche reflektierend sein soll.
• Erstellen Sie ein Material und legen Sie die Umgebungskarte als Ergebnis des Renderings von dieser zweiten Kamera fest, z.

zum Beispiel:

var mirrorCubeMaterial = new THREE.MeshBasicMaterial( 
    { envMap: mirrorCubeCamera.renderTarget }); 

• in Ihrer Render-Funktion, müssen Sie von allen Kameras machen. Verstecken Sie das reflektierende Objekt vorübergehend (damit es der Kamera, die Sie verwenden wollen, nicht im Weg steht), rendern Sie von dieser Kamera und blenden Sie dann das reflektierende Objekt ein.

zum Beispiel:

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

Diese Code-Schnipsel aus den Links sind ich oben geschrieben; Schau sie dir an!