麻烦THREE.CubeTextureLoader

Question

我正在尝试在立方体上创建带有纹理贴图的3d骰子。如果我只加载一个纹理它显示正常（当然，我不能为每一面指定不同的图像）。我尝试使用CubeTextureLoader，但我得到一个完全乱码的纹理（Here's what I see）。有什么建议吗？

// This doesn't work
THREE.CubeTextureLoader().load(['/public/images/dice6-red.png',
                        '/public/images/dice6-red.png',
                        '/public/images/dice6-red.png',
                        '/public/images/dice6-red.png',
                        '/public/images/dice6-red.png',
                        '/public/images/dice6-red.png'], function(texture) {

    var geometry = new THREE.BoxGeometry( 2,2,2 );
    var material = new THREE.MeshPhongMaterial({color: 0xffffff,
                                                map: texture});
    var cube = new THREE.Mesh( geometry, material );
    cube.position.x = 10;
    cube.position.y = -20;
    self._scene.add(cube);
    self.update();
});

// This works fine
new THREE.TextureLoader().load('/public/images/dice6-red.png', function(texture) {

    var geometry = new THREE.BoxGeometry( 2,2,2 );
    var material = new THREE.MeshBasicMaterial({color: 0xffffff,
                                                map: texture});
    var cube = new THREE.Mesh( geometry, material );
    cube.position.y = -20;
    self._scene.add(cube);
    self.update();
});

Answer 1

要在当前版本的Three.js（v93）中在立方体的两侧放置不同的图像，请在网格构造函数中使用一组材质。例如：

EPSG:3857