Graphics Reference
In-Depth Information
var cubemap =
THREE.ImageUtils.loadTextureCube(urls);
cubemap.format = THREE.RGBFormat;
3. From this cubemap, we can use THREE.BoxGeometry and a custom
THREE.ShaderMaterial object to create a skybox (the environment sur-
rounding our meshes):
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value =
cubemap;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.DoubleSide
});
// create the skybox
var skybox = new THREE.Mesh( new
THREE.BoxGeometry( 10000, 10000, 10000 ),
material );
scene.add(skybox);
Three.js provides a custom shader (a piece of WebGL code) that we can
use for this. As you can see in the code snippet, to use this WebGL code,
we need to define a THREE.ShaderMaterial object. With this material, we
create a giant THREE.BoxGeometry object that we add to scene.
4. Now that we've created the skybox, we can define the reflecting objects:
var sphereGeometry = new
THREE.SphereGeometry(4,15,15);
var envMaterial = new
Search WWH ::




Custom Search