2011年7月15日金曜日

Three.jsでMQOデータを表示するまで

こんばんわに。にゃまだんです。
Three.jsの需要ありそうなのでMQOの読み込み方について少しだけ書きます。


データはこちらのページh0211.zipを使わせていただきます。
まずはこいつをMetasequoiaでちょこっと加工して保存します。

具体的には
1.mat2の頂点、面を削除
2.mat1を残してマテリアルを削除
3.ボーンの影響度のオブジェクトを削除
というかんじです(はちゅねさんの場合はこの処理が必要、でないと黒くなる)。
そのあとにオブジェクトを一つにまとめます(右上のパネル)。
腕とかネギとかがあると思いますが別のオブジェクトにD&Dしていけば消えます。

そして上書き保存したmqoファイルをBlenderで読み込みます、使うバージョンは2.58です。
そのままでは読み込めないのでMeshIOというアドオンを使用します。
ダウンロードするのはpymeshio-1.8.6.zipです。
解凍して出てきたblender25-meshioというフォルダをC:\Program Files\Blender Foundation\Blender\2.58\scripts\addonsにコピーします。

Three.jsのアドオンもインストールしておきます。
とりあえずgit cloneしてThree.jsのソースとエクスポータを手に入れます。
# git clone git://github.com/mrdoob/three.js.git
そしてthree.js/utils/exporters /blender/2.58/scripts/addonsにあるio_mesh_threejsフォルダをC:\Program Files\Blender Foundation\Blender\2.58\scripts\addonsにコピーします。

次にBlenderを起動。File→User Preferences→Add-Ons→Import-Exportを選択し、下の方にあるMeshIOとThree.jsのアドオンにチェックを入れます。
ついでに左下のSave as Defaultボタンを押しておくと次回からもこのアドオンが有効になります。

そしてFile→Import→Metasequoia(mqo)でファイルが読み込めるようになります。
読み込んだあとに左下のリストをTexturedに変更します(でないとテクスチャが確認できません)。
そのあとに出力するオブジェクトを選択します(この場合はmiku_BONE.mqo直下のmiku)。

あとはFile→Export→Three.js(.js)でエクスポートします。
だいたい次のような設定でいいと思います

これでThree.jsで読み込めるファイルが完成しました。

次は読み込み用のソースです。
エクスポートしたjsファイル、テクスチャファイル、Three.jsをHTMLファイルと同じ位置に配置してください。
THREE.JSONLoaderを使用して読み込みます。
loadメソッドのmodelcallbackは必須項目、texture_pathはテクスチャを使用する際は必須項目となります。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Blender import</title>
        <script src="Three.js"></script>
        <script>
            addEventListener("load", function(){
                var camera, scene, renderer, geometry, material, mesh;
 
                //カメラ
                camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 50;
 
                //シーン
                scene = new THREE.Scene();
 
                //ファイル読み込み
                var loader = new THREE.JSONLoader();
                loader.load( {
                    model: "./miku.js",     // モデルパス
                    texture_path: ".",      //テクスチャパス
                    callback: function( geometry ) { 

                    //メッシュ作成
                    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());

                    //メッシュをシーンに追加
                    scene.addObject( mesh );
     
                    //レンダラ作成
                    renderer = new THREE.WebGLRenderer();
                    renderer.setSize( window.innerWidth, window.innerHeight );
     
                    //DOMを追加
                    document.body.appendChild( renderer.domElement );
     
                    //ループ開始
                    setInterval( function () {
                        mesh.rotation.y += 0.02;
     
                        //レンダリング
                        renderer.render( scene, camera );
                    }, 16);
                    }
                });
            }, false);
        </script>
    </head>
    <body>
    </body>
</html>

これを表示するとだいたいこんなかんじになります(Demo)。

ですが、複数オブジェクトの出力方法はよくわかりませんでした(シーンの出力機能はあるようですが)

0 件のコメント:

コメントを投稿