Graphics Reference
In-Depth Information
1. To create a dynamic cubemap, we need to use
THREE.CubeCamera
:
cubeCamera = new THREE.CubeCamera( 0.1,
20000, 256 );
cubeCamera.renderTarget.minFilter =
THREE.LinearMipMapLinearFilter;
scene.add( cubeCamera );
With
THREE.CubeCamera
, we can take a snapshot of the environment and
use it as the
cubemap
object in our materials. For the best result, you should
position
THREE.CubeCamera
at the same location as the mesh on which
you want to use the dynamic
cubemap
object. In this recipe, we use it on the
central sphere, which is located at this position: 0, 0, 0. So, we don't need to
set the position of
cubeCamera
.
2. For this recipe, we use three geometries:
var sphereGeometry = new
THREE.SphereGeometry(4,15,15);
var cubeGeometry = new
THREE.BoxGeometry(5,5,5);
var cylinderGeometry = new
THREE.CylinderGeometry(2,4,10,20, false);
3. Next, we're going to define the materials. We use the following two materials:
var dynamicEnvMaterial = new
THREE.MeshBasicMaterial({envMap:
cubeCamera.renderTarget });
var envMaterial = new
THREE.MeshBasicMaterial({envMap: cubemap
});
The first one is the material that uses the output from
cubeCamera
as its
cubemap, and the second material uses a static
cubemap
object.
4. With these two materials, we can create the meshes and add them to the
scene:
