Three.js Cube - Different textures didn't work

Question

Hello guys i wanted to put 6 textures on each face of my thee.js theard in compliance to this theard: Three.js - Using CubeTextureLoader to create a different image on each face of a cube

Here is my code:

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();

When I load the page there is no cube; nothing. It works when I use only one Texture...

I check this snippet work for me any ways you can try this ( are you running this on server instance ( feeling the differential loading on your system) try this: var texture0 = new THREE.TextureLoader().load( 'crate1.gif' ); var texture1 = new THREE.TextureLoader().load( 'crate3.gif' ); var texture2 = new THREE.TextureLoader().load( 'crate4.gif' ); var texture3 = new THREE.TextureLoader().load( 'crate5.gif' ); var texture4 = new THREE.TextureLoader().load( 'crate6.gif' ); var texture5 = new THREE.TextureLoader().load( 'crate7.gif' ); — Ajit kohir

Steve C Steve C · Accepted Answer · 2016-03-26T00:01:25

this jsfiddle might help: http://jsfiddle.net/plotnik/8RtTy/3/

if it works with a single texture, initialize it this way and then set:

mesh.material = faceMaterial;
mesh.material.needsUpdate = true;

after calling render().

Three.js Cube - Different textures didn't work

1 Answers