How to play all animations within .glb using typescript

Questions
, , ,
1

Hi, im learning using sbcode’s typescript tutorials.
I have my custom animated .glb loaded and displaying correctly.
I can’t figure out how to tell it in the typescript to make all the multiple animations contained in the .glb play simultaneously. (and preferably loop)

Ive tested the .glb in the gltf viewer here: https://gltf-viewer.donmccurdy.com/. It works perfectly when i select “playAll” in the animation controls within the viewer.

Any advice would be appreciated!
-Mark

2

If all your animations are added to a mixer, then you can play them all using something like below.

gltf.animations.forEach(
    (a: THREE.AnimationClip) => {
        mixer.clipAction(a).play()
    }
)

See example usage at GLTF Custom Animations - Three.js Tutorials (sbcode.net)

In the client.ts code provided on this link, see lines 117-124

Drag your model into the dropzone and if it contains multiple animations, then it should give you the option to “play all”. If it doesn’t work, then can you share your model.

3

Awesome! thank you sir! I missed the play all button on your example my first go. Yes this got my model animated!!

Thanks again Sean, your tutorials are fantastic.

1 Like