The HTML assumes that you have downloaded the minified three.js library and saved it in a folder named ‘js’. I’ve also created my application, three-texture-tut.js, and saved it in the same location. Again, I’m going to start with similar javascript from my previous tutorial:

var camera;
var scene;
var renderer;
var mesh;

init();
animate();
function init() {
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
 var light = new THREE.DirectionalLight( 0xffffff );
 light.position.set( 0, 1, 1 ).normalize();
 scene.add(light);
 var geometry = new THREE.CubeGeometry( 10, 10, 10);
 var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
 mesh = new THREE.Mesh(geometry, material );
 mesh.position.z = -50;
 scene.add( mesh );
 renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
 window.addEventListener( 'resize', onWindowResize, false );
 render();
}
function animate() {
 mesh.rotation.x += .04;
 mesh.rotation.y += .02;
 render();
 requestAnimationFrame( animate );
}
function render() {
 renderer.render( scene, camera );
}
function onWindowResize() {
 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize( window.innerWidth, window.innerHeight );
 render();
}

If you run your application now, you should see a spinning blue cube like the one pictured below.

What we are going to do is make our boring blue cube look like a cool, game ready, low poly crate similar to the one pictured below.

In order to do that we need to do a couple of things. First we need to create a new folder called images. This folder should be at the same level as your js folder. Next, click on the following image, save it to your new images folder and name it crate.jpg.

Once you have the image saved in the correct location, we need to change our application to load the image and use this image as the texture for our cube. Open the three-texture-tut.js file and replace the following line:

var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

with:

var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/crate.jpg') } );

And that’s it. Refresh your browser and you will see a spinning crate instead of a plain blue cube. So what happened here? You will notice that while constructing our material, we specified the map property and set its value to the crate image. Three.js then took that texture and applied it to each face of our cube for us.

This is really cool, but what if we want a different texture for each face of the cube? Fortunately Three.js provides a couple of ways for us to do this. The first method to do this is to simply give Three.js a list of textures, one for each face. To do this we’re going to create 6 new materials, each with a different texture.

So, the first thing we need to do is have six different textures. Click on the following images and save them to your images folder with these names: bricks.jpg, clouds.jpg, stone-wall.jpg, water.jpg, and wood-floor.jpg.

After you have saved the images replace the following line:

var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/crate.jpg') } );

with:

var material1 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/crate.jpg') } ); var material2 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/bricks.jpg') } ); var material3 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/clouds.jpg') } ); var material4 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/stone-wall.jpg') } ); var material5 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/water.jpg') } ); var material6 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/wood-floor.jpg') } ); var materials = [material1, material2, material3, material4, material5, material6]; var meshFaceMaterial = new THREE.MeshFaceMaterial( materials );

What we just did with the lines above was to create an array of materials, each material having a different texture. We then use this array of materials to create a MeshFaceMaterial.

Finally, we need to tell our geometry to use this array of materials. Change the following line:

mesh = new THREE.Mesh(geometry, material );

to:

mesh = new THREE.Mesh(geometry,  meshFaceMaterial);

Refresh your browser. As you watch the cube spin you will see a different texture for each face of the cube. Again, this is very cool, but creating and loading an image for every face of our model becomes very impractical as the face count increases in our 3D models. This leads to the final method used for texture mapping called UV mapping.

The code above creates six arrays, one for each sub image in the texture. Each array contains 4 points that define the bounds of the sub image. The values of the coordinates range from 0-1 where 0,0 is the bottom left corner and 1,1 is the upper right corner.

The coordinate system is in terms of percentage of the texture. Let’s take a look at the array representing the bricks sub image in more detail to help clarify what is happening here.

var bricks = [
   new THREE.Vector2(0, .666),
   new THREE.Vector2(.5, .666),
   new THREE.Vector2(.5, 1),
   new THREE.Vector2(0, 1)
];

The bricks sub image is in the upper left corner of our texture, so the coordinates for it are as follows in a counter clockwise direction starting with the lower left corner of the sub image.

Lower left corner:
0 – The left most edge
.666 – Two thirds of the way up from the bottom

Lower right corner:
.5 – Half way across
.666 – Two thirds of the way up from the bottom

Upper right corner:
.5 – Half way across
1 – The top of the texture

Upper left corner
0 – The left most edge
1 – The top of the texture

Now that we’ve defined the sub images in our texture we can begin applying them to the faces of our cube. The first thing we’re going to do is add the following line: