three.jsでfbxファイルを読み込み、3Dアニメーションをする

three.jsでfbxファイルを読み込み、3Dアニメーションをする

こんにちは!

プログラム学習中のdynaです。


この記事は、

three.jsを使用して、.fbx拡張子のファイルを読み込み、WEBブラウザ上でアニメーションを再現

する記事です。


3Dモデルは mixamo を使用させていただいてます。

  

デモ動画↓


デモページはボタンリンクより↓

※読み込みに少し時間がかかります(5秒~)。

読み込まれない時は、ブラウザで開いてみてね。

 

★立ち上がる忍者↓


★女の人キック↓



今回使用したのは、

・アニメーションがついているオブジェクトのファイル(.fbx)

・three.js

・ three.js の FBXLoader(.fbxファイルを読み込む)

・ three.js の OrbitControls(マウスで画面をコントロールする)

です。

 

今までのthree.js関連の記事はカテゴリーの「three.js」にあります。以下抜粋↓

★glbを読み込む


★three.jsで頂点で形を作成


では表示の仕方を見ていってみましょう!


表示までの考え方

考え方は以下です。

 

three.jsでシーン・カメラ・コントローラー・光源・レンダラーを設定する

3Dモデルを、FBXLoaderを使って読み込み、シーンに追加する

  ⇒ここで、AnimationMixerを使用してアニメーションを調整、再生設定する

アニメーションを更新し、レンダラーを呼び出す

HTML上に追加する

 

最後に全体を載せているので、全体のコードを見たい方は「全体のコード」をご覧ください。


では各項目ずつコードを見ていきます。


three.jsでシーン・カメラ・コントローラー・光源・レンダラーを設定する

まずはthree.jsを読み込みます。


初期の導入についてはこちらをご覧ください。


今回はCDNを利用させてもらいます。

HTML↓

 

three.jsと今回必要な FBXLoader OrbitControls を読み込みます。


シーン・カメラ・レンダラー・光源・コントローラーを設定します。


3Dモデルを、FBXLoaderを使って読み込み、シーンに追加する

次に表示する3Dモデルを読み込みます。

3Dモデルのファイルは、HTMLファイルと同じ階層に置いておきます。

 

3Dモデルの読み込み

 

上記コードを少し解読します。

 

3Dモデルの.fbxを読み込むにはFBXLoaderを使用します。

公式のチュートリアルがあるので、まずは3Dモデルのみ読み込んでみるとわかりやすいかもしれません。(アニメーションなし)

参考:https://sbcode.net/threejs/loaders-fbx/

FBXLoader

const fbxLoader = new FBXLoader()
fbxLoader.load(
 ’ファイル名.fbx’,
  (object) => {
scene.add(object)
  },
  (xhr) => {
 console.log((xhr.loaded / xhr.total) * 100 + ‘% loaded’)
  },
 (error) => {
 console.log(error)
  }
 )

※コメント部分は分かりやすいように非表示にしています。

※チュートリアルのように(全体のコードも完成させて)読み込みができると、アニメーションしない3Dモデルが表示できました。

 

 

コードに戻ります。

アニメーションを再現するにはAnimation Mixerを使用します。

Animation Clip、Animation Action を使って、動きを再現できるようにします。


Animation Mixer

保存されたデータは、アニメーションの基礎のみを形成します。

実際の再生は、AnimationMixerによって制御されます。

これは、アニメーションのプレーヤーとしてだけでなく、複数のアニメーションを同時に制御してブレンドおよびマージできる実際のミキサーコンソールのようなハードウェアのシミュレーションとして想像することができます。

引用元:https://threejs.org/docs/#manual/en/introduction/Animation-system

Animation Mixerは再生の制御に使うのね。


 

Animation Actions

AnimationActionsは、AnimationClipsに保存されているアニメーションのパフォーマンスをスケジュールします 。

引用元:https://threejs.org/docs/#api/en/animation/AnimationAction

 

AnimationClip

AnimationClipは、アニメーションを表す再利用可能なキーフレームトラックのセットです。

引用元:https://threejs.org/docs/#api/en/animation/AnimationClip

AnimationClipはアニメーションデータみたいな感じかな。

「animations」という名前の配列に格納されるみたい。


 

clipAction

渡されたクリップのAnimationActionを 返します。

引用元:https://threejs.org/docs/#api/en/animation/AnimationMixer.clipAction


3Dモデルにアニメーションをさせてたいので、チュートリアルのFBXアニメーションと上記を参考に記載しました。

参考:https://sbcode.net/threejs/fbx-animation/

 

上記のコードでいう、

の部分です。


3Dモデルの読み込み、アニメーションの設定ができたら、HTMLに書き出します。


アニメーションを更新し、レンダラーを呼び出す

続きのコードです。


書き出したレンダラーをHTML上に追加する

HTMLに追加します。


animate()の関数を書き忘れたり、HTMLに書き出しを忘れると、表示されないよ。
(当たり前ですが・・・たまに書き忘れる)


全体のコード

全体のコードです。

サーバ―にあげないで確認したい場合はクロスオリジンエラーが出るので注意が必要です。

 

 

たったこれだけなのに、かなり躓きました・・・(;’∀’)

無料で3Dモデルを使用させてくれるMiXamoとそれを表現できるthree.jsってすごい・・・!

引き継き勉強していきたいと思います!

 

ここまで読んで下さりありがとうございます。

  

<学習本>


<あわせて読みたい>

導入の記事↓

 

広告