web-dev-qa-db-ja.com

各面に異なるテクスチャを持つThree.jsキューブ

私は、各面に異なるテクスチャを持つthree.jsキューブを作成しようとしています。

基本的にサイコロ。これは私のサンドボックス環境にあるので、それぞれの面にサイコロ画像（1〜6）を持つ回転キューブを作成するだけです。完了したら、これをブラウザベースのゲームに使用する予定です。この例では、追加のブラウザーサポートのためにキャンバスレンダラーに変更することを考えていますが、Chromeでのみテストしています。

ここでSOおよび他のグーグルのかなりの量についてのいくつかの質問を見て、そして私は答えを持っていたが（実際にはかなり単純なように見えた）しかし、私はそれを動作させることができません。

Three.jsは初めてですが、JavaScriptは初めてです。

参考に使用したページは

SO-各面に異なるテクスチャを持つthree.jsキューブ

SO-異なるテクスチャ面を持つ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）関数です-マテリアルは未定義です。それは、私の物質的な定義の1つ/すべてにおいて何かが正しくないと信じるようになります。

Three.js r58を使用します。

現時点ではHTMLもCSSもありません。現時点ではJSだけです

6面すべてで同じ画像を使用してキューブを回転させることができますが、異なる画像は使用できません。画像は1〜6のサイコロドットの画像です。

少し時間があれば、必要に応じてフィドルをすることができます

javascriptthree.js
29
OJay

編集：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

32
WestLangley