THREE.CubeTextureLoader 出现问题答案

【问题标题】：Trouble with THREE.CubeTextureLoaderTHREE.CubeTextureLoader 出现问题
【发布时间】：2018-06-01 22:20:07
【问题描述】：

我正在尝试在立方体上创建带有纹理贴图的 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();
});

【问题讨论】：

CubeTextureLoader 用于加载天空图，而不是真正用于在“立方体”网格上添加纹理。并不是说它不能适应，只是那不是它的本意。

标签： three.js

【解决方案1】：

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

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

【讨论】：