各面に異なるテクスチャを持つThree.js立方体

Question

私は各面に異なるテクスチャを持つthree.js立方体を作成しようとしています。

基本的にはサイコロです。これは私のサンドボックス環境にありますので、両面にサイコロ画像（1-6）が付いた回転キューブを作成してください。一度やったら、これをブラウザの基本ゲームに使うつもりです。この例では、Chromeでテストしただけですが、追加のブラウザサポートのためにキャンバスレンダラーに変更することを検討しています。

私は答えを持っていましたが（実際にはかなり単純なようでしたが）、私はそれをうまく動作させることができませんでした。

私は合理的に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); 
} 

私は取得していますエラーがbufferGuessUVType（材料）関数ですWHichi

Uncaught TypeError: Cannot read property 'map' of undefined 

three.jsライン19546（ない分版）からである - 材料は未定義です。それは、私が何かを信じるように導くことは、私の重要な定義の1つ/すべてに正しいものではありません。

3つの.js r58を使用しています。

この時点

で何のHTMLやCSS、ちょうどJSは、私は非常に喜んで6面すべてにではなく、異なる画像と同じ画像を回転するキューブを得ることができ、本当にありません。 THREE.MultiMaterialが廃止されました：

Answer 1

EDITを必要に応じて、私はフィドルを行うことができ、もう少し時間を考えると6

- 画像はサイコロドットの画像だけ、1です。これで、材料配列をコンストラクタに直接渡すことができます。同様に：

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

scene.add(dice); 

ネットから古い例をコピーすることに注意してください。

現在のバージョンにアップグレードするには、Migration Wikiを必ずチェックしてください。

three.js r.85