javascript - Cubo Three.js con diferente textura en cada cara.

Question

Estoy tratando de crear un cubo three.js con diferentes texturas en cada cara.

Básicamente un dado. Esto está en mi entorno de sandbox, por lo que debería producir un cubo giratorio con imágenes de dados (1-6) en cada lado. Una vez hecho esto, pretendo usar esto para un juego de base de navegador. Este ejemplo solo lo he probado en Chrome, aunque contemplé cambiarlo a un renderizador de lienzo para soporte de navegador adicional.

Eché un vistazo a algunas preguntas aquí sobre SO y una cantidad sustancial de otras búsquedas en Google, y aunque tuve la respuesta (en realidad parecía bastante simple) pero simplemente no puedo hacerlo funcionar.

Soy razonablemente nuevo en three.js, pero no JavaScript.

Las páginas que usé para referencia son

SO - three.js cube con diferente textura en cada cara

SO - three.js cube con diferentes texturas caras

evanz - prueba three.js cube

y enriquemorenotent.com - three.js construyendo un cubo con diferentes materiales en cada cara

Mi código

var camera, scene, renderer, dice;

init();
animate();

function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(110, 110, 250);
    camera.lookAt(scene.position);
    scene.add(camera);


    var materials = [
       new THREE.MeshLambertMaterial({
           map: THREE.ImageUtils.loadTexture(''/Content/Images/dice-1-hi.png'')
       }),
       new THREE.MeshLambertMaterial({
           map: THREE.ImageUtils.loadTexture(''/Content/Images/dice-2-hi.png'')
       }),
       new THREE.MeshLambertMaterial({
           map: THREE.ImageUtils.loadTexture(''/Content/Images/dice-3-hi.png'')
       }),
       new THREE.MeshLambertMaterial({
           map: THREE.ImageUtils.loadTexture(''/Content/Images/dice-4-hi.png'')
       }),
       new THREE.MeshLambertMaterial({
           map: THREE.ImageUtils.loadTexture(''/Content/Images/dice-5-hi.png'')
       }),
       new THREE.MeshLambertMaterial({
           map: THREE.ImageUtils.loadTexture(''/Content/Images/dice-6-hi.png'')
       })
    ];
    dice = new THREE.Mesh(
        new THREE.CubeGeometry(562, 562, 562, 1, 1, 1, materials),
        new THREE.MeshFaceMaterial());
    scene.add(dice);

}

function animate() {
    requestAnimationFrame(animate);
    dice.rotation.x += .05;
    dice.rotation.y += .05;
    dice.rotation.z += .05;
    renderer.render(scene, camera);
}

El error que estoy recibiendo es

Uncaught TypeError: Cannot read property ''map'' of undefined 

de la línea three.js 19546 (no la versión mínima) WHichi es la función bufferGuessUVType (material) - el material no está definido. Lo que me lleva a creer que algo no está bien en una / todas mis definiciones de material.

Utilizando three.js r58.

Realmente no hay HTML o CSS, solo el JS en este punto

Con mucho gusto puedo obtener un cubo que gira con la misma imagen en los seis lados pero no con imágenes diferentes. Las imágenes son solo las imágenes de los puntos dados, 1 - 6.

Dado un poco más de tiempo podría hacer un violín si es necesario

Answer 1

EDIT: THREE.MultiMaterial ha quedado en desuso. Ahora puede pasar la matriz de materiales directamente al constructor. Al igual que:

dice = new THREE.Mesh( new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ), materials );

scene.add( dice );

Tenga cuidado de copiar viejos ejemplos de la red.

Siempre revise el Wiki de migración para obtener ayuda para actualizar a la versión actual.

tres.js r.85