Graphics Reference
In-Depth Information
Using a cubemap to create reflective
materials
With the approach Three.js uses to render scenes in real time, it is difficult and very
computationally intensive to create reflective materials. Three.js, however, provides a
way you can cheat and approximate reflectivity. For this, Three.js uses cubemaps. In
this recipe, we'll explain how to create cubemaps and use them to create reflective
materials.
Getting ready
A cubemap is a set of six images that can be mapped to the inside of a cube. They
can be created from a panorama picture and look something like this:
In Three.js, we map such a map on the inside of a cube or sphere and use that in-
formation to calculate reflections. The following screenshot (example
04.10-use-
reflections.html
) shows what this looks like when rendered in Three.js:
