Reflective material in THREE.js

Question

How can I create a material that reflects other shapes from the scene? I have tried the reflectivity property but it didn't reflect anything.

There is an example that seems to have this effect

It doesn't look like standard materials were used to create this.

Solution 1

To go into a bit of the theory: a reflection is basically an image of the scene taken from a certain position. So if you want a planar mesh to serve as a mirror, you'll have to add a camera at that position, have it render the scene to a texture in the animation loop, and then use that texture in the material for the planar mesh. I would also recommend looking at http://stemkoski.github.io/Three.js/Reflection.html in addition to the examples WestLangley mentioned.

Also, play around with settings; for a less reflective effect, for example, try:

var mirrorMaterial = new THREE.MeshBasicMaterial( { color: 0x111111, envMap: mirrorCamera.renderTarget } );

or

var mirrorMaterial = new THREE.MeshPhongMaterial( { emissive: 0x111111, envMap: mirrorCamera.renderTarget } );

Solution 2

https://threejs.org/examples/#webgl_materials_cubemap
I did it with the above example:

new THREE.MeshLambertMaterial ({
    map: texture,    
    envMap: scene.background,      
    combine: THREE.MixOperation,     
    reflectivity: .5     
})

The key variable, as i understand, is THREE.MixOperation