質問: Three.jsで「glbファイル」を読み込んで3Dキャラクターを動作させているコードがあるのですが、「glbファイル」とはどういうファイルですか? どうやって作成するのですか? テキストエディタで「glbファイル」ソースコードを確認しようとしたのですが、ファイルサイズが大きくて無理でした。 そこで、Windowsの3Dビューアー(今回初めて使いました)で「glbファイル」を開いたら、3Dが表示され、プルダウンで複数アニメーション切り替えが出来ました。 これは、1つの「glbファイル」に、3Dデータと複数アニメーションの動作が格納されている、ということですか?
回答: Three.jsで動作させることが可能な3Dキャラクターは、どうやって作成するのですか? の回答に記述した通り、glbファイルはglTFというフォーマットで3Dモデルやシーン(そしてアニメーション)を記述するファイルです。 3Dモデルは大量にポリゴンの座標などの情報を含んでいるため、これを記述するには非常に大きなデータが必要です。 このためglbファイルの中身は通常で数MBを超えるバイナリベースの形式になっており、テキストエディタで人間が視認することは想定されておりません。 ※glTFのWikipediaには「glTF (GL Transmission Format) はJSONによって3Dモデルやシーンを表現するフォーマット」と書かれていますが、JSONの中にバイナリデータが詰め込まれています。 ちなみに3DモデルのエディタであるBlenderのソースコード(*.blendファイル)もバイナリベースなのでエディタで書き換えることが前提となっています。テキストエディタで書き換えることは実質不可能です。 glTFには複数のアニメーションを格納することができ、animationsという配列を選択して切り替えることができます。 切り替えのためにThree.jsではAnimationMixer#clipActionというメソッドが用意されています。 おそらくご質問の3Dビューアーも同様の仕組みでプルダウンの項目を読み取って表示しているはずです。 参考資料: Three.jsを用いたモデルのアニメーション切り替え