Trouble with THREE.CubeTextureLoader

问题

I'm trying to create 3d dice with texture maps on a cube. If I just load a single texture it displays fine (although, of course, I can't specify different images for each side). I tried using CubeTextureLoader but I get a totally garbled texture (Here's what I see). Any suggestions?

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

回答1:

To place different images on the sides of a cube in the current version of Three.js (v93), use an array of materials in the mesh constructor. For example:

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

来源：https://stackoverflow.com/questions/35333088/trouble-with-three-cubetextureloader

标签

three.js