Hey everyone, I'm trying to add 6 textures on each face of my three.js cube following this thread: Three.js - Using CubeTextureLoader to create a different image on each face of a cube
Below is the code I am using:
scene = new THREE.Scene();
var textureLoader = new THREE.TextureLoader();
var texture0 = textureLoader.load( 'crate1.gif' );
var texture1 = textureLoader.load( 'crate3.gif' );
var texture2 = textureLoader.load( 'crate4.gif' );
var texture3 = textureLoader.load( 'crate5.gif' );
var texture4 = textureLoader.load( 'crate6.gif' );
var texture5 = textureLoader.load( 'crate7.gif' );
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.MultiMaterial( materials );
var geometry = new THREE.BoxGeometry( 20, 20, 20,1,1,1 );
var mesh = new THREE.Mesh( geometry, faceMaterial );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
Unfortunately, when I load the page, there is no cube being rendered at all. It seems to work fine when I use only one texture...