Three.js - Using CubeTextureLoader to create a different image on each face of a cube

Question

I\'m trying to create a cube with a different image on each side using CubeTextureLoader. My process is:

1. Load a cube texture using new THREE

Answer 1

As Micnil mentioned, CubeTextureLoader is for CubeMap which is used for SkyBox or EnvMap.

Use MeshFaceMaterial instead.

var textureLoader = new THREE.TextureLoader();

var texture0 = textureLoader.load( './0.jpg' );
var texture1 = textureLoader.load( './1.jpg' );
var texture2 = textureLoader.load( './2.jpg' );
var texture3 = textureLoader.load( './3.jpg' );
var texture4 = textureLoader.load( './4.jpg' );
var texture5 = textureLoader.load( './5.jpg' );

var materials = [
    new THREE.MeshBasicMaterial( { map: texture0 } ),
    new THREE.MeshBasicMaterial( { map: texture1 } ),
    new THREE.MeshBasicMaterial( { map: texture2 } ),
    new THREE.MeshBasicMaterial( { map: texture3 } ),
    new THREE.MeshBasicMaterial( { map: texture4 } ),
    new THREE.MeshBasicMaterial( { map: texture5 } )
];
var faceMaterial = new THREE.MeshFaceMaterial( materials );

var geometry = new THREE.BoxGeometry( 20, 20, 20 );
var boxMesh = new THREE.Mesh( geometry, faceMaterial );