Graphics Reference
In-Depth Information
How to do it...
When you've got textures, using them to add depth to a model is very straightfor-
ward:
1. First, create the geometry you want to use together with the bump map:
var cubeGeometry = new
THREE.BoxGeometry(15, 15, 15);
In this recipe, we create THREE.BoxGeometry , but you can use a bump
map with any kind of geometry.
2. The next step is to create the material on which we define the bump map:
var cubeBumpMaterial = new
THREE.MeshPhongMaterial();
cubeBumpMaterial.map =
THREE.ImageUtils.loadTexture(
"../assets/textures/
Brick-2399.jpg");
cubeBumpMaterial.bumpMap =
THREE.ImageUtils.loadTexture(
"../assets/textures/
Brick-2399-bump-map.jpg");
Here, we create THREE.MeshPhongMaterial and set its map and
bumpMap properties. The map property points to the color map texture, and
the bumpMap property point to the grayscale bump map texture.
3. Now you can just create THREE.Mesh and add it to scene:
var bumpCube = new
THREE.Mesh(cubeGeometry,
Search WWH ::




Custom Search