Edited at

Blender から GLTF を出し、 Three.js で使うまでの覚書 (アニメーション編1、ずん子さん編)

More than 1 year has passed since last update.

Blenderは、GLTF(2.0)を出せます。

Three.jsは、GTLF(2.0)を、読めます。

以上。めでたしめでたし。

ということで、モデルメッシュ編の続きとして、アニメーション編・・の、その1です。

というかコレを書いてよいのかどうか迷いましたが、多分残す意味がある気がしたので、公開して後悔することにします。

*この文では、「Blenderでのモデルの作り方」とか「Three.jsの使い方」とかは全くやりません。いじょ。


やりたかったこと

:配布されているBlenderモデル(東北ずん子さん)を、GLTFで出力して、Three.jsで読ませる

ずん子さんカワイイ

zzm_a1zunko53.png


やったこと


  • ずん子さんのデータを、こちらからDLする(使用規約は読みましょうね)

  • Blenderで開く

  • Blenderに、GLTFエクスポーターを導入する(導入済みならよし)

  • ずん子さんをBlenderで開く


  • GLBでエクスポートを、下記の設定の通りで行う(重要)

    putZunko_1.png


  • 出力に失敗する:skull:(重要!必要なステップ)


  • アニメーションビューにして、ドープシートを「アクション」にすると、Actionが増えている!(これが上記出力失敗時に増えたもの)

    putzunko_2.png


  • GLBでエクスポートを、下記の設定の通りで行う( Bake Skinning constrains を外す)

    putZunko_3.png


  • Three.js で、出力されたデータを読み込む


  • っしゃおら


putZunko_4.png


  • 色をもうちょっと頑張って出したいなら、Blender側でPBRマテリアルを適用したりしてから出力したりする

動くサンプルはこちら


なんでこれでうまくったんだろう?(予想を含む考察)


  • 試しに初回から「Bake Skinning constrains」を外して出力してみてください。足などの一部がアニメーションされません。

  • おそらく、上記の設定のOnによる失敗により、「初期位置のデータ」が、どっかに入った(雑・・・)

  • それで、正式出力の時に、うまくいった。


モーフは?


  • ずん子さんには、15種類表情モーフ(シェイプ)が設定されている模様?

  • ただ、その15種類のモーフを使いたい場合は、「 モディファイヤを適用 」のチェックを外す!

    putZunko_5.png


  • 「Head」のグループの中のメッシュに、モーフ付きメッシュが入ってるので、うまいことやってください。モーフの適用などは前回などで書いたので参照を。


東北地方は、これからしばらく(10月中旬まで)は コスモスが見ごろ のようですよ!

たまの脳みそのリフレッシュに、東北地方に行ってみよう!