Implementing Realistic Mirror Reflections in Three.js | Reflection Mapping with CubeCamera

Cube Reflection Mapping for Mirror‑Like Reflections (Three.js [r145])

Do you want to create realistic mirror‑like reflections in Three.js?
This article explains how reflection mapping works using a CubeCamera, and how to implement a reflective material that behaves like a real mirror.

By using a CubeCamera (six cameras rendering in six directions to a WebGLCubeRenderTarget), you can create materials that reflect the surrounding environment and apply them to your meshes.

Rotate with left mouse drag, move the camera with right mouse drag, and zoom with the mouse wheel.
On touch devices: swipe to rotate, drag with two fingers to move the camera, and pinch in/out to zoom.

Source Code

//Create a render target for reflection mapping
cubeRenderTargetReflection = new THREE.WebGLCubeRenderTarget(512,{
    generateMipmaps: true,
    minFilter: THREE.LinearMipmapLinearFilter    });
cubeRenderTargetReflection.texture.mapping = THREE.CubeReflectionMapping;//Set to reflection mapping

//Create a CubeCamera for reflection mapping
// (near clipping distance, far clipping distance, render target)
cubeCameraReflection = new THREE.CubeCamera( 0.1, 10000, cubeRenderTargetReflection);

//Create the reflective material
let materialReflection=new THREE.MeshLambertMaterial({
  color:0xffffff,
  envMap:cubeCameraReflection.renderTarget.texture,
  reflectivity:0.9,    //Reflection intensity
});

//Create a sphere geometry (radius, width segments, height segments, phiStart, phiLength)
let sphereGeometry=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//Create the reflective mesh from geometry and material
meshReflection=new THREE.Mesh(sphereGeometry,materialReflection);
meshReflection.position.set(0,0,0);
scene.add(meshReflection);//Add mesh to the scene
cubeCameraReflection.position.copy(meshReflection.position);//Set CubeCamera position

Back to the list of 3D JavaScript content