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

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月中旬まで)は コスモスが見ごろ のようですよ!
たまの脳みそのリフレッシュに、東北地方に行ってみよう!

adrs2002
読み方は「じゃいあん」です。巻き舌気味でお願いします。日本の秘境「トチギー」の僻地で、 Three.jsとWebGL使って同人ゲーム作ろうとしてます。  本業はゲームとは関係ないC#いじってます。
http://www001.upp.so-net.ne.jp/adrs2002/teststage.html
Why not register and get more from Qiita?
  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