Reflective material at THREE.js

Question

How can I create material that reflects other shapes from the scene? I tried the reflectivity property, but it did not reflect anything.

Here is an example that seems to have this effect: http://threejs.org/examples/#webgl_shading_physical

This is not like using standard materials to create it.

Answer 1

Delve into the theory: reflection is basically an image of a scene taken from a certain position. Therefore, if you want the flat grid to serve as a mirror, you will need to add the camera to this position so that it turns the scene into a texture in the animation loop, and then use this texture in the planar mesh material, I would also recommend watching http: / /stemkoski.imtqy.com/Three.js/Reflection.html in addition to the examples mentioned by WestLangley.

In addition, play with the 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 } );