Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

ば…バカな!XNA!あいつは死滅したはず!(してます)

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

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

ですが、上記の一時ファイル変換には3Dモデリングソフトなどを介す必要があり、3Dモデルソフトウェアに明るくない人とか、昔一緒にゲームを作ったモデラーさんはすでに音信不通とか、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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away