Есть ли способ добавить различные текстуры к объекту с помощью TextureLoader.load

Question

Я хотел бы добавить различные текстуры для каждой грани коробки, но я не уверен, если loader.load это способ сделать это, прямо сейчас у меня есть:

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

Можно ли добавить больше изображений в loader.load или мне нужно использовать другой метод?

Answer 1

Вы можете просто загрузить изображение с loader.loadи сохраните его в переменной:

var loader = new THREE.TextureLoader();

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

Затем вы можете применить его так:

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

Вместо загрузки текстуры и использования анонимного обратного вызова, просто загрузите текстуру, сохраните ее в переменной, а затем примените, где это необходимо.