Threejs TextureLoader CubeGeometry

Question

I am learning threejs and I want that my cube has 6 different textures on each side. I did make that with loadTexture

var material3 = new THREE.MeshPhongMaterial( {map: THREE.ImageUtils.loadTexture('textures/ps.png')} );

I did save 6 of this materials in array and then use THREE.MeshFaceMaterial. But there is problem with THREE.ImageUtils.loadTexture because it is deprecated and I should use THREE.TextureLoader and I do not know how to load 6 textures in this way.

This is what I have:

function texture()
{
    var loader = new THREE.TextureLoader();
    loader.load( 'textures/ps.png', function ( texture )
    {
        var geometry = new THREE.CubeGeometry( 10, 10, 10 );

        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
        mesh = new THREE.Mesh( geometry, material );
        mesh.position.z = -50;

        scene.add( mesh );
    } );
}

Answer 1

I think this is close to what you are looking for:

function MultiLoader(TexturesToLoad, LastCall, ReturnObjects) {
        if (TexturesToLoad.length == 0) return;
        if (!ReturnObjects) ReturnObjects = [];
        var loader = new THREE.TextureLoader()
        //Pop off the latest in the , 
        //you could use shift instead if you want to read the array from 
        var texture = TexturesToLoad.shift()

        loader.load(texture,

        function (texture) {
            ReturnObjects.push(texture);
            if (TexturesToLoad.length > 0) {
                MultiLoader(TexturesToLoad, LastCall, ReturnObjects)
            } else {

                LastCall(ReturnObjects)
            }

        },
        LoadProgress,
        LoadError);
    }

    function LoadProgress(xhr) {
        console.log(('Lodaing  ' + xhr.loaded / xhr.total * 100) + '% loaded ');
    }

    function LoadError(xhr) {
        console.log('An error happened  ');
    }

call it with this

var TexturesToLoad = []
TexturesToLoad.push("../surfacemap.jpg")
TexturesToLoad.push("../normalmap.jpg");
TexturesToLoad.push("../spekularmap.jpg");
    var ReturnedMaterials=[];
    var ReturnMaterials=[];



    var LastCall=function(ReturnedMaterials)
    {
            var surfaceMap =  ReturnedMaterials[0];        
            var normalMap =   ReturnedMaterials[1];                    
            var specularMap = ReturnedMaterials[2];         

            var decalMaterial = new THREE.MeshPhongMaterial( 
            {           
                map: surfaceMap,
                normalMap: normalMap,
                normalScale: new THREE.Vector2( 1, 1 ),
                specularMap: specularMap,
                transparent:false,  
                wireframe: false 
            } );

        var globeGeometry = new THREE.SphereGeometry(100.0, SPHERE_SIDES, SPHERE_SIDES);            
        mesh = new THREE.Mesh( globeGeometry, decalMaterial ); 
        mesh.rotation.x=Math.PI/2;


    };

    MultiLoader(TexturesToLoad,LastCall,ReturnMaterials)

Explanation: The new THREE.TextureLoader, uses a callback function. This ensures that the ressource you are using is really loaded when you need to add it. Callbacks are difficult however if you want to use a lot of material. above MultiLoader allows you to call recursivly and then call back to the function you want to use all your materials at. The materials are collected into an array (ReturnObjects) .

Answer 2

There are many ways to achieve it. I'll show you 2;

1) Make your object (cube) using own vertices and faces

.vertices.push( new THREE.Vector3( x, y, z ) );
.faces.push( new THREE.Face3( x, y, z ) );

I've prepared an example in jsfiddle.

2) Using UV map. So first you need to prepare object with UV map in 3D software like Blender and export it as a JSON file.

I've also prepared an example in jsfiddle.

If you are not familiar with UV map or Blender, check toturials.