Kostka Three.js z inną teksturą na każdej powierzchni

Question

Próbuję utworzyć kostkę three.js z różnymi teksturami na każdej twarzy.

Zasadniczo kostka. To jest w moim środowisku piaskownicy, więc powinien po prostu produkt obrotowy kostki z obrazami kości (1-6) po każdej stronie. Kiedy już to zrobię, zamierzam użyć tego w podstawowej grze przeglądarkowej. Ten przykład przetestowałem tylko w Chrome, ale rozważam zmianę go na renderer renderingu w celu dodatkowej obsługi przeglądarki.

Spojrzałem na kilka pytań tutaj na SO i znaczną ilość innych googling, i chociaż miałem odpowiedź (wydawało się dość proste faktycznie), ale po prostu nie mogę go uruchomić.

Jestem całkiem nowy w stosunku do pliku three.js, ale nie JavaScript.

Strony użyłem dla odniesienia są

SO - three.js cube with different texture on each face

SO - three.js cube with different texture faces

evanz - Test three.js cube

i enriquemorenotent.com - three.js building a cube with different materials on each face

mój kod

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

Błąd Dostaję jest

Uncaught TypeError: Cannot read property 'map' of undefined 

z Three.js linii 19546 (nie wersja min) whichi jest funkcja bufferGuessUVType (materiał) - materiał jest niezdefiniowany. Co prowadzi mnie do przekonania, że ​​coś jest nie tak w jednej/wszystkich moich materialnych definicjach.

Korzystanie z pliku three.js r58.

Jest to naprawdę nie HTML lub CSS, JS właśnie w tym momencie

mogę dość szczęśliwie dostać sześcian obracający się z tego samego obrazu na wszystkich sześciu stron, ale nie z różnych obrazów. Obrazy są tylko obrazy z kostką kropek, 1 - 6.

Biorąc pod uwagę nieco więcej czasu mogę zrobić skrzypce jeśli wymagane

Answer 1

EDIT: THREE.MultiMaterial została zaniechana. Możesz teraz przekazać tablicę materiałów bezpośrednio do konstruktora. Tak jak poniżej:

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

scene.add(dice); 

Uważaj, aby skopiować stare przykłady z sieci.

Zawsze należy sprawdzić, czy Migration Wiki zaktualizowano do aktualnej wersji.

three.js r.85