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

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

More than 1 year has passed since last update.

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をプレビューするとアニメーションの名前も一緒に表示されていたのでおそらく名前で指定する方法もあると思いますが調べてもわからなかったので断念。

DA_garebare
dev
nnn-school
IT×グローバル社会を生き抜く“創造力”を身につけ、世界で活躍する人材を育成する。
https://nnn.ed.jp/
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