javascript - sphere - three js texture

Three.js-Usar CubeTextureLoader para crear una imagen diferente en cada cara de un cubo

Question

CubeTextureLoader crear un cubo con una imagen diferente en cada lado usando CubeTextureLoader . Mi proceso es:

1. Cargue una textura de cubo con el new THREE.CubeTextureLoader()
2. Crea un nuevo material usando la textura del cubo
3. Crea un cubo usando este material
4. Dibuja el cubo

El código relevante está debajo. Puedo dibujar un cubo con un solo material para todas las caras bien usando THREE.TextureLoader() , pero cuando uso CubeTextureLoader no CubeTextureLoader nada en la pantalla ni ningún error de consola.

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

Supongo que estoy usando el tipo de material o malla incorrectos, pero no puedo encontrar ninguna información o ejemplos sobre cómo hacer esto correctamente. ¿Algunas ideas?

Answer 1

Como mencionó Micnil, CubeTextureLoader es para CubeMap que se usa para SkyBox o EnvMap.

Use MeshFaceMaterial en MeshFaceMaterial lugar.

var textureLoader = new THREE.TextureLoader();

var texture0 = textureLoader.load( ''./0.jpg'' );
var texture1 = textureLoader.load( ''./1.jpg'' );
var texture2 = textureLoader.load( ''./2.jpg'' );
var texture3 = textureLoader.load( ''./3.jpg'' );
var texture4 = textureLoader.load( ''./4.jpg'' );
var texture5 = textureLoader.load( ''./5.jpg'' );

var materials = [
    new THREE.MeshBasicMaterial( { map: texture0 } ),
    new THREE.MeshBasicMaterial( { map: texture1 } ),
    new THREE.MeshBasicMaterial( { map: texture2 } ),
    new THREE.MeshBasicMaterial( { map: texture3 } ),
    new THREE.MeshBasicMaterial( { map: texture4 } ),
    new THREE.MeshBasicMaterial( { map: texture5 } )
];
var faceMaterial = new THREE.MeshFaceMaterial( materials );

var geometry = new THREE.BoxGeometry( 20, 20, 20 );
var boxMesh = new THREE.Mesh( geometry, faceMaterial );