ドーモ、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