acurate acurate - 2 months ago 9
Javascript Question

Is there a way to add different textures to an object with TextureLoader.load

I would like to add different textures to each face of a box but I am not sure if

loader.load
is the way to do it, right now I have:

loader.load('img/brick.jpg', function ( texture ){
var boxGeometry = new THREE.BoxGeometry( 3, 3, 3 );
var boxMaterial = new THREE.MeshLambertMaterial({
map: texture,
overdraw: 10
});

var box = new THREE.Mesh( boxGeometry, boxMaterial );
box.castShadow = true;

scene.add(box);
}


Is it possible to add more images in the loader.load or do I have to use a different method?

Answer

You can just load an image with loader.load, and store it in a variable:

var loader = new THREE.TextureLoader();

var brick = loader.load('img/brick.jpg');
var occlusion = loader.load('img/ao.jpg'); //Example texture
//More textures here

You can then apply it like so:

var boxGeometry = new THREE.BoxGeometry( 3, 3, 3 );
var boxMaterial = new THREE.MeshLambertMaterial({ 
    map: brick,
    aoMap: occlusion, //An example use 
    overdraw: 10 
});
var box = new THREE.Mesh( boxGeometry, boxMaterial );
box.castShadow = true;

scene.add(box);

Instead of loading the texture and using an anonymous callback, just load the texture, store it in a variable, then apply where needed.