15
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Three.jsでglTFのアニメーションを複数再生する

Last updated at Posted at 2018-09-18

three.jsでglTFのアニメーションを再生する記事はあったのですが複数のアニメーションを切り替える方法は書かれていなかったのでなかったので書いてみました
複数のアニメーションがあるglTFの3Dモデルが前提に書かれています。

まずglTFを読み込んでシーンに配置してアニメーションを再生します。
シーンの作成等は省略します

main.js

const loader = new THREE.GLTFLoader();
const model = 'hoge.gltf';

//glTFの読み込み
loader.load(model, (data) => {
  const gltf = data;
  const object = gltf.scene;

//アニメーションの読み込み
  const animations = gltf.animations;
  mixer = new THREE.AnimationMixer(object);

  const anime = mixer.clipAction(animations[0]);
  anime.play();

//シーンに追加
  scene.add(object);

});

この
mixer.clipAction(animations[0]); []の数字を書き換えれば別のアニメーションが再生されます。
glTFのanimationsの上から0から順に指定できるみたいです。

このままじゃ条件分岐で別のアニメーションを指定しても一度再生したアニメーションはループ再生しっぱなしになって他のアニメーションと混ざるので関数に切り離します。

main.js
const loader = new THREE.GLTFLoader();
const model = 'hoge.gltf';

//glTFの読み込み
loader.load(model, (data) => {
  const gltf = data;
  const object = gltf.scene;
  const animations = gltf.animations;


  mixer = new THREE.AnimationMixer(object);

//シーンに追加
  scene.add(object);

  //アニメーションの切り替え
  function chengeanime(num) {
    mixer.stopAllAction();
    const anime = mixer.clipAction(animations[num]);
    anime.setLoop(THREE.LoopOnce)
    anime.clampWhenFinished = true

    anime.play();
  }
});

stopAllAction()を使ってすべてのアニメーションを一旦ストップしsetLoop(THREE.LoopOnce)でループを無効、clampWhenFinishedtrueにすればアニメーションの最後のフレームでアニメーションが終了します。
これで条件分岐でアニメーションが切り替えられるようになったと思います。

setLoop(THREE.LoopOnce)を書かなければループしつつアニメーションが混ざりません。


VScodeの拡張機能でglTFをプレビューするとアニメーションの名前も一緒に表示されていたのでおそらく名前で指定する方法もあると思いますが調べてもわからなかったので断念。

15
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?