Three.js куб с различной текстурой на каждом лице

Question

Я пытаюсь создать куб Three.js с различными текстурами на каждом лице.

В основном кости. Это в моей среде с песочницей, поэтому нужно просто создать вращающийся куб с изображениями кубиков (1-6) с каждой стороны. После этого я собираюсь использовать это для основной браузерной игры. Этот пример я тестировал только в Chrome, хотя собирался сменить его на визуализатор холста для дополнительной поддержки браузера.

Я взглянул на несколько вопросов здесь о SO и значительном количестве других поисковиков, и хотя у меня был ответ (на самом деле казался достаточно простым), но я просто не могу заставить его работать.

Я достаточно новичок в three.js, но не в JavaScript.

Страницы, которые я использовал для справки

SO - куб Three.js с различной текстурой на каждом лице

ТАК - куб Three.js с разными текстурами граней

evanz - Испытание кубика three.js

и enriquemorenotent.com - three.js строит куб с разными материалами на каждом лице

Мой код

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

Я получаю ошибку

Uncaught TypeError: Cannot read property 'map' of undefined 

из строки three.js 19546 (не минимальная версия) WHichi - функция bufferGuessUVType(material) - материал не определен. Что заставляет меня верить, что что-то не так в одном / всех моих материальных определениях.

Используя three.js r58.

На самом деле нет HTML или CSS, только JS на данный момент

Я вполне могу получить куб, вращающийся с одним и тем же изображением на всех шести сторонах, но не с разными изображениями. Изображения являются просто изображения точек кости, 1 - 6.

Если бы мне понадобилось немного больше времени, я мог бы поиграть на скрипке

Answer 1

РЕДАКТИРОВАТЬ: THREE.MultiMaterial был объявлен устаревшим Теперь вы можете передать массив материалов прямо в конструктор. Вот так:

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

scene.add( dice );

Будьте осторожны при копировании старых примеров из сети.

Всегда проверяйте Miki Wiki для помощи в обновлении до текущей версии.

three.js r.85