Three.js立方體在每張臉上具有不同紋理

Question

我試圖在每張臉上創建具有不同紋理的three.js立方體。

基本上是一個骰子。這是在我的沙盒環境中，所以應該在每一面上製作一個帶有骰子圖像（1-6）的旋轉立方體。一旦完成，我打算將其用於瀏覽器基礎遊戲。這個例子我只在Chrome中進行了測試，但是考慮將其更改爲canvas渲染器以獲得更多瀏覽器支持。

看看這裏的幾個問題和大量的其他Google搜索，雖然我有答案（實際上看起來相當簡單），但我根本無法讓它工作。

我對three.js是合理的新手，但不是JavaScript。

頁我用的參考是

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

SO - three.js cube with different texture faces

evanz - Test three.js cube

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

我的代碼

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（材料）函數

- 材料是未定義的。這導致我相信在我的一個/所有的材料定義中有些事情是不正確的。

使用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); 

小心從網上覆制舊的例子。

請務必檢查Migration Wiki以獲取升級到當前版本的幫助。

three.js r.85