Three.js - 使用 CubeTextureLoader 在立方体的每个面上创建不同的图像

我正在尝试使用以下方法创建一个每侧都有不同图像的立方体CubeTextureLoader。我的流程是：

1. 使用加载立方体纹理new THREE.CubeTextureLoader()
2. 使用立方体纹理创建新材质
3. 使用这种材质创建一个立方体
4. 画出立方体

相关代码如下。我可以使用单一材质为所有面绘制一个立方体THREE.TextureLoader()，但是当我使用CubeTextureLoader我在屏幕上没有看到任何内容或任何控制台错误。

var textureLoader = new THREE.CubeTextureLoader();

textureLoader.load([
    'textures/face-1.jpg',
    'textures/face-2.jpg',
    'textures/face-3.jpg',
    'textures/face-4.jpg',
    'textures/face-5.jpg',
    'textures/face-6.jpg'
 ], function (texture) {
    var material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: texture
    });

    var cube = new THREE.Mesh(
        new THREE.BoxGeometry(20, 20, 20),
        material
    );

    // add & draw calls happen after all this
});

我猜我使用了错误的材质类型或网格，但找不到任何有关如何正确执行此操作的信息或示例。有任何想法吗？

THREE.MultiMaterial也已被删除，如下所述：https://github.com/mrdoob/ Three.js/issues/10931

现在，您可以在网格构造函数中使用材质数组。例如：

let cubeGeometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let materialArray = [
    new THREE.MeshBasicMaterial( { map: loader.load("xpos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("xneg.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("ypos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("yneg.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("zpos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("zneg.png") } ),
];
let mesh = new THREE.Mesh( cubeGeometry, materialArray );