tmlib.jsで3Dモデル表示

[tmlib.js Advent Calendar 2014](http://qiita.com/advent-calendar/2014/tmlib)の13日目の記事です。
(three.jsでつまづいて投稿が遅れてすいません)



# tmlib.js x three.js
tmlibはthree.jsとの連携もサポートしてます（three.jsのver.57以前までなら動作OKでした）

最新のver.69までサポートしてくれるとモーフアニメーションも使えるので、今後のサポートに期待してますっ！

という訳で今回は[tmlib.jsで3Dモデル表示](http://simplecode.jp/tmlibx3D/)してみました〜♪
（WSADキー or 矢印キーで視点操作できます）
![1.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/755dbd25-94b9-b779-2cdd-be13c8ca14a9.gif)


## １）まずはblenderでモデル作成
tmlibはひよこが公式キャラなのでblenderでなんとなく作ってみる。
![0.png](https://qiita-image-store.s3.amazonaws.com/0/15028/f834bfad-994d-8441-e03e-a1b369b9ac72.png)
Web用に3Dモデル作るなら以下の点で[blender](http://blender.jp/)がオススメです！

　1. 無料でMacもWindowsもソフトが動く
　2. three.js用にインポート/エクスポートできる（アドオン要）


## ２）three.js形式に出力
blenderにthree.jsのアドオンを入れる事で簡単にthree.js用にjs出力してくれます。
アドオンの追加の仕方などは、以前自分のブログに書いたので参照して下さい。
　→　[blenderの初期設定メモ](http://ameblo.jp/chicktack123/entry-11800339008.html)


## ３）テクスチャと3Dデータのjsをフォルダに入れる
こんな感じに入れておく
![2.png](https://qiita-image-store.s3.amazonaws.com/0/15028/3a894aee-2529-4e8d-43b3-bf39367537ab.png)

## ４）ソースコード
HTMLはthree.jsを読み込むだけ！

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>tmlibxthree</title>
    <script src="http://rawgithub.com/mrdoob/three.js/r55/build/three.js"></script>
    <script src="https://rawgithub.com/phi-jp/tmlib.js/develop/build/tmlib.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <canvas id="world"></canvas>
</body>
</html>

```


Three.jsはobjやColladaなどの3Dデータ読込できますが、今回は簡単なJSONローダーでやります。

```javascript:index.js
/*
 * constant
 */
var SCREEN_WIDTH    = 465;              // 画面幅
var SCREEN_HEIGHT   = 465;              // 画面高さ
var SCREEN_CENTER_X = SCREEN_WIDTH/2;   // 画面中央X座標値
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;  // 画面中央Y座標値

/*
 * main
 */
tm.main(function() {
    // アプリケーション
    var app = tm.three.ThreeApp("#world");
    // リサイズ
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    // 画面にフィット
    app.fitWindow();
    // メインシーンに切り替える
    app.replaceScene(MainScene());
    // 実行
    app.run();
});


/*
 * scene
 */
var MainScene = tm.createClass({
    // three.js 用シーンを継承
    superClass: tm.three.Scene,

    init: function() {
        // 親を初期化 fov: 視野角, aspect: 縦横比
        this.superInit(60, SCREEN_WIDTH/SCREEN_HEIGHT);

        var group = tm.three.Element();
        this.add(group);

        var texture = new THREE.ImageUtils.loadTexture( "hiyoko/texture.png");

        var material = new THREE.MeshBasicMaterial( { map: texture} );


        // LOADER
        var loader = new THREE.JSONLoader();
        loader.load('hiyoko/hiyoko.js', function(geometory,materials){
            var elm = tm.three.MeshElement(geometory,material);
            // サイズ
            elm.scale.set(20, 20, 20);
            // 配置
            elm.position.x = 0;
            elm.position.y = -100;
            elm.position.z = -100;
            // キー操作
            elm.update = function(app) {
                var key = app.keyboard;
                var point = app.pointing;
                // right
                if (key.getKey("d") || key.getKey("right")) { this.position.x -= 10; }
                // left
                if (key.getKey("a") || key.getKey("left")){ this.position.x += 10; }
                // UP
                if (key.getKey("e")) { this.position.y -= 10; }
                // DOWN
                if (key.getKey("q"))   { this.position.y += 10; }
                // 離れる
                if (key.getKey("s") || key.getKey("down"))    { this.position.z -= 10; }
                // 近づく
                if (key.getKey("w") || key.getKey("up"))    { this.position.z += 10; }

                this.rotation.y += 0.05;
            };

            group.add( elm );
        });
        // カメラセットアップ
        this.camera.position.set(0, 0, 300);
    }
});
```

これで3Dモデルを表示するのも簡単ですね！
ボーンアニメーションもしたかったけど、今回はここまで〜。