Computer Graphics. Lab 07. Textures
Witold Alda
Computer Graphics. Lab 07. Textures
Texture Mapping
Texture Mapping is the most important way to improve scene realism. In three.js library, they can be
used in several ways. The basic is that of mapping an array, containing the input image, on the object
surface.
Texture loading , using three.js can be done e.g. with function:
function createMesh(geom, imageFile) {
var texture = THREE.ImageUtils.loadTexture
("textures/" + imageFile)
var mat = new THREE.MeshPhongMaterial();
mat.map = texture;
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
Example 01 – Basic Texture
The example contains basic texture mapping with default parameter values. We will only look at it.
Example 02 – Bump mapping
Second example allows us to modify normal vectors in on an object surface.
In function analogous to that in previous example two textures are used:
function createMesh(geom, imageFile, bump) {
var texture = THREE.ImageUtils.loadTexture(
"textures/" + imageFile)
var mat = new THREE.MeshPhongMaterial();
mat.map = texture;
var bump = THREE.ImageUtils.loadTexture(
"textures/" + bump)
mat.bumpMap = bump;
Please look what is in bump texture and what happens if we change it into another (not necessary
dedicated to bump mapping.
Examples 04, 05, 06 – Sky box
Next three examples show possibilities of environment mapping using Sky box.
Please look how 6 textures are mapped onto Cube object and which size is actually rendered?
In examples 05 i 06 we have transparent and mirror-like objects. Please look how the material I
defined to get needed results (a envMap parameter)
In course of the lab, please put into one scene surrounded bya a skybox, a few objects with different
properties: ordinary texture, bumpmapped, mirror and transparent.
© Copyright 2024