Comment utiliser réflexion dans three.js?

Question

Je veux avoir une surface de cube réfléchissante dans une page WebGL avec Three.js. Il devrait ressembler à un écran de téléphone portable, qui reflète un peu de lumière, mais il doit toujours être noir.

Answer 1

J'ai créé un exemple de cube réfléchissant (et également une sphère réfléchissante) avec des commentaires détaillés. La version live est à

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

avec le code bien formaté à

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

(Cela fait partie d'une collection d'exemples de travaux dirigés à http://stemkoski.github.com/Three.js/)

Les principaux points sont les suivants:

• ajouter à votre scène une deuxième caméra (une CubeCamera) positionnée sur l'objet dont la surface doit être réfléchissante
• créer un matériau et définir la carte d'environnement en tant que résultats du rendu à partir de cette seconde caméra, par ex.

par exemple:

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

• dans votre fonction rendu, vous devez rendre de toutes vos caméras. Masquez temporairement l'objet réfléchissant (afin qu'il ne nuise pas à la caméra que vous allez utiliser), restituez cette caméra, puis affichez l'objet réfléchissant.

par exemple:

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

Ces extraits de code sont des liens que je posté ci-dessus; Vérifie-les!