¿Cómo puedo usar la reflexión en three.js?

Question

Quiero tener una superficie de cubo reflectante en una página WebGL con Three.js. Debería parecerse a la pantalla de un teléfono móvil, que refleja algo de luz, pero todavía tiene que ser negra.

Answer 1

He creado un ejemplo de un cubo reflector (y también una esfera reflectante) con comentarios detallados. La versión en vivo es en

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

con código de formato agradable en

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

(Esto es parte de una colección de ejemplos del manual en http://stemkoski.github.com/Three.js/)

Los puntos principales son:

• agregue a su escena una segunda cámara (una CubeCamera) colocada en el objeto cuya superficie debe ser reflectante
• cree un material y configure el mapa de entorno como los resultados del renderizado de esta segunda cámara, p.

por ejemplo:

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

• en su función de render, que tiene que hacer de todas sus cámaras. Oculte temporalmente el objeto que está reflejando (para que no se interponga en el camino de la cámara que va a utilizar), renderice desde esa cámara y luego muestre el objeto reflector.

por ejemplo:

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

Estos son fragmentos de código a partir de los enlaces que he publicado anteriormente; échales un vistazo!