33

各面に異なるテクスチャを持つ 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 から (最小バージョンではありません) これは bufferGuessUVType(material) 関数です - マテリアルは未定義です。これにより、私の重要な定義の 1 つまたはすべてに何かが正しくないと信じるようになります。

three.js r58 を使用します。

HTML や CSS は実際にはなく、現時点では JS のみです。

六面すべてが同じ画像で回転する立方体を非常に喜んで取得できますが、異なる画像では回転しません。画像はサイコロのドット 1 ～ 6 の画像です。

もう少し時間があれば、必要に応じてフィドルを実行できます

4

1 に答える 1

38

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

于 2013-07-02T13:43:43.000 に答える