Куб Three.js с разной текстурой на каждой грани

Я пытаюсь создать кубик three.js с разными текстурами на каждой грани.

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

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

Я новичок в трёх .js, но не JavaScript.

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

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

SO - кубик three.js с разными границами текстур

evanz - Проверить трёхмерный куб.

и 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

из строки tr.js 19546 (не версия min) WHichi - это функция bufferGuessUVType (материал) - материал undefined. Это заставляет меня думать, что что-то не соответствует одному/всем моим материальным определениям.

Использование тр .js r58.

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

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

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

Ответ 1