Blog

Three.jsでBoneをあつかう

3Dでアニメーションを実装する場合に、
オブジェクトに骨組み(Bone)を予め設定しておいて、
その骨組みを動かすことで、オブジェクトをアニメーションさせる、
ボーンアニメーションという仕組みがあります。

Three.jsには、このボーンアニメーションの仕組も準備されています。

↓作ってみたもの(Three.js公式のDEMOを基にしています)
DEMO

方法

ボーンの設定は、おおよそ以下の様な流れで行います。

  1. オブジェクトを設置する
  2. ボーン(関節)を設置する
  3. ボーンからスケルトン(ボーンを合わせたもの)を作成する
  4. オブジェクトとスケルトンをbindする

記事の最後にコードの全文を載せています。こちらは、Three.jsの公式DEMOを基に、一部書き換えたものです。

ポイントは、以下の箇所です。

THREE.Bone()で骨格の一部を作成し、
それを基にスケルトン(ボーン全体)を作成します。

更にそれを.bind()によって、オブジェクトに設置します。

あとは、

と言った形式で、ボーンを変形・移動させることで、オブジェクトを変形・移動させることができるようになります。

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ