Skip to content

Latest commit

 

History

History
78 lines (55 loc) · 2.57 KB

16_materials_reflections.md

File metadata and controls

78 lines (55 loc) · 2.57 KB

Example step

Make a reflective material.

Goal

Make a reflective material.

Instructions

  • start from our default scene with environment or make it following the environment mapping tutorial

  • now we need camera able to map the cube map of the environment all around an object: the THREE.CubeCamera is composed from six different cameras and can therefore capture everything in the scene, mapping it to an image

  • THREE.CubeCamera takes the near plane, the far plane and the size of the texture to be rendered

    var cubeCamera = new THREE.CubeCamera(0.1, 5000, 512);

  • a texture resolution of 512 is quite and average value, but you may want something more

  • since we are looking for reflections, we must the camera which mapping to use for the renderering, setting the cubeCamera.renderTarget.mapping property

    cubeCamera.renderTarget.mapping = THREE.CubeReflectionMapping;

  • add the CubeCamera to the scene

  • let's create a MeshBasicMaterial with just the envMap option

    var reflectMaterial = new THREE.MeshBasicMaterial({ 
    envMap: cubeCamera.renderTarget 
});

  • get a big sphere geometry with a good subdivision (like 16) using THREE.SphereGeometry

    var sphereGeometry = new THREE.SphereGeometry(4, 16, 16);

  • and finally create the sphere object using the geometry and the material with THREE.Mesh

    var sphere = new THREE.Mesh(sphereGeometry, reflectMaterial)

  • put your geometry right in the center of the scene and set the CubeCamera for that material at the same position

    sphere.position.set(0,0,0);
cubeCamera.position = sphere.position;

  • last but not least, you need to update the cube map every frame in order to keep in consistent with the view: in the animate() function add the call

    cubeCamera.updateCubeMap( renderer, scene );

  • try to experiment with different materials (Lambert, Phong, ...)

  • work with parameter reflectivity of THREE.Material in order to improve your reflections

Explanation

In order to reflect the environment, the renderer needs to use raytracing, which is not available in THREEJS and is a very expensive technique.

For this reason we emulate it using a texture mapped onto the world: the CubeCamera helps us giving a "ready to go" environment projection from six different cameras.