ファイル形式FBXについて調査してみました

Web JavaScript TypeScript

前書き

前回ブラウザ上で3D表現をJavaScriptで表現できるThree.jsについて説明した。

melheaven.hatenadiary.jp

ファイルの読み込みをしたい

ozateck.sakura.ne.jp

上記のサイトによると、
FBXLoaderというモジュールを適用して実装する。
ローカルに3DFileであるFBX Fileが存在する場合、
そのファイルのパスを指定することで、
Objectを読み込み、前回作成したSceneに配置することでcanvasに3Dオブジェクトがレンダリングされる。

Vueの場合はpublicディレクトリ配下に置くことで、
直接パスからデータをLoadできる。

URLで読み込み、出力されるのは"Group"というThree.js独特の入れ子構造型である。
内部には3Dオブジェクトを構成する情報が並べられており、
Concole.logするとブラウザのDeveloper Toolで確認できる。

// camera,light,sceneの設定は前回記事を参照

const loader = new THREE.FBXLoader();

loader.load(modelFile, (fbx)=>{
                fbx.position.set(0, 0, 0);
		fbx.rotation.set(0, Math.PI, 0);
		scene.add(fbx);
　　　　　renderer.render(scene, camera);
});

3Dfileの.fbx fileについて

.fbxファイルについて馴染みがない。
FBXデータ自体はFBX BinaryとFBX ASCIIに大別できます。
FBX ASCIIはtextファイルで人間でも読める感じ。
一般的にはBinaryファイルであり、console.logで確認できるか何を書いているかさっぱり理解できないはず。

FBX ASCIIはXMLのようにノード木構造となっており、情報が格納されている。
FBX Binaryはマジックバイナリ・FBXVersion・
ファイルのコンテンツを並べるトップレベルノード・ファイルフッターなどで構成されているらしい。

詳しくは以下のスライドにて（自分の知識で限界まで分かるわかりやすさ）

www.slideshare.net

Three.jsでFBXファイルを読み込んでみる

Three.jsについてはこちらから。

melheaven.hatenadiary.jp


まずはThree.jsのinstallをしないといけません。
そこからFBXLoaderを用いて、
引数はファイルのURL、返り値はGroup型のロードした3Dファイルオブジェクトです。

// FBXLoaderを読み込み
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader' 
// Groupとはロードした3Dファイルを示すThree.js特有の型
 import { Group } from 'three'

public static getInstance = () : Loader => new Loader ();
private manager = new LoadingManager();
private fbxLoader = new FBXLoader(this.manager);

// 引数はファイルの位置を示すURL、返り値はGroup
public async fbxloader(fileurl: string): Promise<Group> {
      return new Promise((resolve, reject): void => {
             this.fbxLoader.load(
                   fileurl,
                   (obj: Group) : void => resolve(obj),
                   (event: ErrorEvent) : void  => reject(event),
                   (event: ProgressEvent) : void  => {},  
             );
       });
}

URLはローカルに置いたファイルのパスでも構いませんし、
Binaryデータの場合だと、

Blobに変換してあげて、createObjectURLでオブジェクトのURLを生成するのでも構いません。
createObjectURLではtextかblob、MediaSourceしか対応していないので注意が必要です。

const fileurl = URL.createObjectURL(Blob);