2

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?

Andrew Li
  • 55,805
  • 14
  • 125
  • 143
acurate
  • 105
  • 1
  • 1
  • 8

1 Answers1

0

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.

Andrew Li
  • 55,805
  • 14
  • 125
  • 143
  • This actually works! But now I'm not sure how to actually make the faces look different? Since it only shows one texture on all walls at a time. – acurate Oct 01 '16 at 23:28
  • @acurate The problem is that you're using `MeshLambertMaterial`, which only allows providing a map to the whole mesh, where the map is copied to all faces. – Andrew Li Oct 01 '16 at 23:29
  • @acurate If you want to achieve face-by-face maps, see [this](http://stackoverflow.com/questions/17418118/three-js-cube-with-different-texture-on-each-face) post. – Andrew Li Oct 01 '16 at 23:33