STERFIELD

Three.jsでBoneをあつかう

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

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

SHARE

合わせて読みたい