有没有办法使用 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);

无需加载纹理并使用匿名回调，只需加载纹理，将其存储在变量中，然后在需要的地方应用。