Graphics Reference
In-Depth Information
THREE.MeshBasicMaterial(
{envMap:cubemap});
var sphere = new
THREE.Mesh(sphereGeometry, envMaterial);
As you can see, we also pass in the cubemap we created as a property (
en-
vmap
) to the material. This informs Three.js that this object is positioned in-
side a skybox, defined by the images that make up
cubemap
.
5. The last step is to add the object to the scene, and that's it:
scene.add(sphere);
In the example in the beginning of this recipe, you saw three geometries. You can
use this approach with all different types of geometries. Three.js will determine how
to render the reflective area.
How it works...
Three.js itself doesn't really do that much to render the
cubemap
object. It relies on
a standard functionality provided by WebGL. In WebGL, there is a construct called
samplerCube
. With
samplerCube
, you can sample, based on a specific direction,
which color matches the
cubemap
object. Three.js uses this to determine the color
value for each part of the geometry. The result is that on each mesh, you can see a
reflection of the surrounding cubemap using the WebGL
textureCube
function. In
Three.js, this results in the following call (taken from the WebGL shader in GLSL):
vec4 cubeColor = textureCube( tCube,
vec3( -vReflect.x, vReflect.yz
) );
A more in-depth explanation on how this works can be found at
http://codeflow.org/
