Three.js用のX-fileインポータを作ってみる（完了）

ドーモ、Javascript サン。　レガシーXNA野郎　デス

ば…バカな！XNA！あいつは死滅したはず！（してます）

Three.jsでは、すでに様々な形の３Dモデルローダーが提供されていますが、自分が使いたかった肝心の「Xファイル（directXのファイル）」のローダーが、ありませんでした。

DirectXファイルの多くはFBXに変更でき、そこから各種形式（MMDとかJsonとか）に変換すれば、Three.jsで読めたりもします。

ですが、上記の一時ファイル変換には３Dモデリングソフトなどを介す必要があり、３Dモデルソフトウェアに明るくない人とか、昔一緒にゲームを作ったモデラーさんはすでに音信不通とか、DirectX形式のファイルをそのまま使いたい場合があると思います。　　ってかあったんです。自分に！！泣いてなんかいないぞ。

ということで、作りました。　Three.js用のDirectXファイル（X-file）用のインポータ。

2017/03/07アップデート。アニメーションが妙な形式ではなく、Three.js標準っぽい形式に対応
2017/11/15大幅アップデート。内部8割書き直し。読めるファイルが増えました。たぶん。

/***********************************/

できること

モデルの読み込み
テクスチャの読み込み
アニメーションの読み込み

できないこと

バイナリ形式Xfileの読み込み（現在はテキスト形式のみ）
詳細なマテリアルの読み込み

/****************************/

使い方

1.Three.jsをしっかりとインポートして、初期化します。
このとき、

THREE.TextureLoader();
THREE.LoadingManager();

を忘れずに宣言しておいてください。まぁなくても大丈夫ですが。

2.上で宣言したLoadingManagerとTextureLoader　を引数に、 XfileLoaderを宣言します。

上も絡めた例

manager = new THREE.LoadingManager();
Texloader = new THREE.TextureLoader();
loader = new XfileLoader(manager, Texloader);

3.読み込むファイルパス、読み込んだ後実行する関数などをセットします。
一番重要なのは、しっかりと、「シーンオブジェクトに追加する」ということだったりします
例

   loader.load(['testmodel.x'], function (object) {
        // モデルは配列で返ります。1つしかなくても配列で返ります。
        for (var i = 0; i < object.models.length; i++) {
            Models.push(object.models[i]);    
            scene.add(Models[i]);             
        }
   }, onProgress, onError);

3.5.　アニメーションがある場合は、もうちょっと頑張ります。
(下記サンプルのhtmlソースを参照ください）

    var Models = [];
    var animates = [];

    loader.load(['model.x'], function (object) {
        for (var i = 0; i < object.models.length; i++) {
                Models.push(object.models[i]);    
                scene.add(Models[i]);             
        }

        var loader2 = new THREE.XLoader(manager, Texloader);
        loader2.load(['animation.x'], function () {

            loader2.assignAnimation(Models[0]); 
            animates.push(Models[0].animationMixer);
            var stand = Models[0].animationMixer.clipAction(Models[0].geometry.animations[0].name);
            stand.play();

        }
        object = null;
    }, onProgress, onError);

4.それっぽく表示されます。

動作サンプルてきなの

サンプル

github には、日本語のReadmeも用意しました。せっかく書いたので活用してやってください。

/****************************/

有難いことに、Ver80あたりから、three.jsの公式サンプルの方にも収録させていただいております。
GithubにはThree.jsのサンプルのものよりも新しいバージョンが公開されていますので、必ずそちらから落として使ってみてください。

なにせサンプルファイルが少ないので、ご利用＆バグ報告お待ちしております　m(_ _)m