Phaser2 + Three.js + .glb でゲームアセットを3Dで表現する

はじめに

今年のはじめに、どうやら3Dをfaceobookに投稿できるようになっているようで、、、

.glbを使うことで、グリグリ動かせるコンテンツが作れるそうです。

今回は、ゲームのアイテムなどをglbで作成して、Phaserで作成しつつ、データをfacebookに投稿できるような仕組みを作ってみます.

.glbの作り方

Metasequoia4では.glbの書き出しが行えるので、Metasequoiaを使うのが便利そうです。

自身は、あまりMetasequoiaのモデリングの要領がわかっておらず、下記のように、
3dsMaxで作ったモデルをMetasequoiaで読み込むような流れを作りました。

3dStudioMax --(.3DMAX)--->Metasequoia---(.glb)---->

Phaserで使うには...

3dデータをそのまま表示する場合は、Three.jsで十分そうでしたが、
今回は、ボタンやUIなど諸々作成したかったので、Phaser2から読み込んでみることにしました。

ゲーム内で、3Dのオブジェクトを作る場合、色々やり方はありそうでしたが、
今回はPhaser内の一つのSpriteとして、Three.jsのテクステャを貼り付けるような方法をとりました。

function add3dSprite(posX, posY) {
    //シーンを作成
    var scene = new THREE.Scene();
    // 座標軸を表示
    var axes = new THREE.AxisHelper(25);
    //scene.add(axes);
    //カメラ
    var camera = new THREE.PerspectiveCamera(50, 1.5, 0.1, 1000);
    camera.position.set(30, 15, 30);
    //camera.lookAt({x:0, y:0, z:0 });
    camera.lookAt(scene.position);
    //コントロール制御(したくない場合はここを外す)
    var controls = new THREE.OrbitControls(camera);
    controls.enableZoom = false;
    //ライト
    var directionalLight2 = new THREE.DirectionalLight(0xffeedd);
    directionalLight2.position.set(100, 100, 100);
    scene.add(directionalLight2);
    //オブジェクト
    //GLTFLoaderを使った読み込み
    var loader = new THREE.GLTFLoader();
    var url = "http://localhost:3000/planet_005.glb";
    var object;
    loader.load(url, function (data) {
        var gltf = data;
        object = gltf.scene;
        object.scale.set(50, 50, 50);
        var animations = gltf.animations;
        if (animations && animations.length) {
            mixer = new THREE.AnimationMixer(object);
            for (var i = 0; i < animations.length; i++) {
                var animation = animations[i];
                mixer.clipAction(animation).play();
            }
        }
        scene.add(object);
    });
    // ThreeのRenderer作成
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: false
    });
    //renderer.setClearColor("#cccccc");
    renderer.setClearColor(0x000000, 1.0);
    // サイズを指定
    renderer.setSize(480, 320);
    // Canvasを取得
    var canvas = renderer.domElement;
    // CanvasからTextureを作成
    baseTexture = new PIXI.BaseTexture(canvas);
    texture = new PIXI.Texture(baseTexture);
    textureFrame = new Phaser.Frame(0, 0, 0, 480, 320, 'hoge');
    // Textureをスプライトとして追加(x:0,y:100でset)
    var sprite = game.add.sprite(posX, posY, texture, textureFrame);
    sprite.anchor.x = 0.5;
    sprite.anchor.y = 0.5;
    animate();

    function animate() {
        requestAnimationFrame(animate);
        if (mixer) mixer.update(clock.getDelta());
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }
}

作ったもの

githubのリンク：