# How do I play a .glb animation?
**URL:** https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970
**Category:** Questions
**Tags:** loaders, animation
**Created:** [February 1, 2024, 6:47pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970 "2024-02-01T18:47:58Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [February 1, 2024, 6:47pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/1 "2024-02-01T18:47:58Z")
Hi there.
I tried a few different guides on how to make my GLB with animations play in three.js. I tried this for starts, but it doesn’t seem to work: [three.js docs](https://threejs.org/docs/#manual/en/introduction/Animation-system), nor do I know the name of my animation. I tried to console.log() it, but I couldn’t find the function to do that either.
I am sure the animation is applied correctly as I opened the .GLB in blender and tested the animation.
This is my site where the three.js script is active: [https://www.mattiasbaldi.com/](https://www.mattiasbaldi.com/)
Code + .glb
[three.js](https://discourse.threejs.org/uploads/short-url/gSdxvt4Ax4PDnVkGAndFRzAkcgu.js) (3.7 KB)
[mb.glb](https://discourse.threejs.org/uploads/short-url/sQy5Zt365L8yStfNnsXPWSmjHvB.glb) (659.2 KB)
---
### Author:  [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [February 1, 2024, 6:49pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/2 "2024-02-01T18:49:23Z")
The script does not contain the animation mixer. I removed that as it interfered with loading my model. So my question is just how I play the .glb. I’m aware there is no animation mixer or anything else in the code.
---
### Author:  [@Oxyn](https://discourse.threejs.org/u/Oxyn)
#### Post date: [February 1, 2024, 7:12pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/3 "2024-02-01T19:12:07Z")
Here is a demo made for a fun challenge (mixamo character control + skin \< 100 lines of code)
[https://github.com/Oxynt/three-mixamo/tree/main](https://github.com/Oxynt/three-mixamo/tree/main)
The demo doesn’t use pre-set animation name, and instead _yoink_ it directly from the object arrays itself.
As well as `subclip` 'ing the frames to create/cut new animations on the fly from the main timeline.
It’s dirty, but it’s compact. So you may quickly find what you need to complete your code.
---
### Author:  [@manthrax](https://discourse.threejs.org/u/manthrax)
#### Post date: [February 1, 2024, 9:12pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/4 "2024-02-01T21:12:05Z")
You use an AnimationMixer to play animations. It’s what it does.
let action = mixer.clipAction( gltf.animations[0] , yourModel);
action.play()
mixer.update( 1/60 )
---
### Author:  [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [February 2, 2024, 5:08am UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/5 "2024-02-02T05:08:02Z")
So why does that not work for me? I applied it here;
```javascript
`//loader
const loader = new GLTFLoader();
let model;
loader.load('/mb.glb', (gltf) => {
model = gltf.scene;
scene.add(model);
//scaling
model.scale.set(.14,.14,.14); // Adjust scale for the model
let action = mixer.clipAction( gltf.animations[0] , model);
action.play()
mixer.update( 1/60 )
});`
```
---
### Author:  [@manthrax](https://discourse.threejs.org/u/manthrax)
#### Post date: [February 2, 2024, 7:41am UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/6 "2024-02-02T07:41:14Z")
Oh the mixer.update(1/60) needs to be in your animation loop!
Right before your renderer.render() is a good spot…
The mixer combines all the animations running on the object, and applies their weighted sum to the skinned meshes.
---
### Author:  [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [February 2, 2024, 8:34am UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/7 "2024-02-02T08:34:22Z")
Did that, no change 😕
---
### Author:  [@manthrax](https://discourse.threejs.org/u/manthrax)
#### Post date: [February 2, 2024, 2:23pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/8 "2024-02-02T14:23:34Z")
Your .glb looks usable if you drag it on here…
> **[glTF Viewer](https://gltf-viewer.donmccurdy.com/)**
>
> Drag-and-drop preview tool for glTF 2.0 3D models.
I don’t know what’s wrong with your code…
Here’s a minimal example: [Glitch :･ﾟ✧](https://glitch.com/edit/#!/daisy-topaz-toucan)
I do the loading/playback in test.js
edit: whoops i guess glitch screwed up and reverted… i’ll have to remake it.
---
### Author:  [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)
#### Post date: [February 2, 2024, 6:07pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/9 "2024-02-02T18:07:07Z")
Your GLB is also functional in my [GLTF Viewer](https://githubdragonfly.github.io/viewers/templates/GLTF%20Viewer.html) and you can see the whole viewer’s code in my repository.
Maybe try introducing the clock, similar to this (which is what my viewer is using):
```js
var clock, mixer;
clock = new THREE.Clock();
// use the following once the loader has loaded the model
if (gltf.animations.length > 0) {
mixer = new THREE.AnimationMixer( gltf.scene );
gltf.animations.forEach( clip => { mixer.clipAction( clip ).loop = THREE.LoopRepeat; } );
mixer.clipAction( gltf.animations[0] ).play();
}
// add to the rendering loop
if ( mixer ) mixer.update( clock.getDelta() );
```
---
### Author:  [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [February 2, 2024, 10:12pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/10 "2024-02-02T22:12:15Z")
Hi there! Appreciate your response. Unfortunately, that doesn’t seem to work either. Can you confirm that I added it correctly? I added the code like so:
```javascript
//clock
var clock, mixer;
clock = new THREE.Clock();
//loader
const loader = new GLTFLoader();
let model;
loader.load('/mb.glb', (gltf) => {
model = gltf.scene;
scene.add(model);
//scaling
model.scale.set(.14,.14,.14); // Adjust scale for the model
// use the following once the loader has loaded the model
if (gltf.animations.length > 0) {
mixer = new THREE.AnimationMixer( gltf.scene );
animations.forEach( clip => { mixer.clipAction( clip ).loop = THREE.LoopRepeat; } );
mixer.clipAction( gltf.animations[0] ).play();
}
});
```
And then added the mixer to the render loop at the end of my code.
```javascript
// add to the rendering loop
if ( mixer ) mixer.update( clock.getDelta() );
```
---
### Author:  [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [February 2, 2024, 10:17pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/11 "2024-02-02T22:17:50Z")
I’m still relatively new to programming. Your code looks a little overwhelming, and I can’t seem to find where “animations” are present, although I did notice you are using an .fbx though. Could that be the difference - I suppose .glb animations should be supported in three though.
---
### Author:  [@manthrax](https://discourse.threejs.org/u/manthrax)
#### Post date: [February 3, 2024, 3:19am UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/12 "2024-02-03T03:19:18Z")
Hey sorry, that glitch I made… I got your GLB loading and animating in it, then glitch crapped out and reverted it… I’m gonna redo it and paste here…
```javascript
this.init = async () => {
let mixer = new THREE.AnimationMixer();
let clock = new THREE.Clock();
let glb = await gltfLoader.loadAsync(
"https://cdn.glitch.global/b94889ff-9799-42c0-abe7-53076d5ef713/mb%20(1).glb?v=1706930112304"
);
let clip = mixer.clipAction(glb.animations[0], glb.scene);
clip.play();
scene.add(glb.scene);
this.update = () => {
mixer.update(clock.getDelta());
};
};
```
Code: [Glitch :･ﾟ✧](https://glitch.com/edit/#!/neon-garnet-lobe)
Live site: [https://neon-garnet-lobe.glitch.me](https://neon-garnet-lobe.glitch.me)
In the glitch… all the THREEJS boilerplate setup is in script.js
Test.js is the stuff specific to loading and playing your glb/animation.
I used an async function so I could use the loadAsync method on the loader instead of using the callback… it makes the flow a little easier to understand.
this.update is called by script.js from the apps rendering loop.
---
### Author:  [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)
#### Post date: [February 3, 2024, 4:32am UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/13 "2024-02-03T04:32:36Z")
Maybe try using the code that @manthrax posted.
Also rely on the browser to show you the errors, since it suggests that you currently don’t have the code `if ( mixer )` in front of the `mixer.update( clock.getDelta() );`.
Here is the picture of the errors from your website:
---
### Author:  [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)
#### Post date: [February 4, 2024, 2:18am UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/14 "2024-02-04T02:18:51Z")
@mattias_98 just in case if you are to try my code again, I have just edited and corrected my code which should fix the `animations` error showing in the picture I posted previously.
It was supposed to be `gltf.animations.forEach( clip => ...` instead of `animations.forEach( clip => ...`
---
### Author:  [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [February 5, 2024, 1:23pm UTC](https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970/15 "2024-02-05T13:23:44Z")
Update
Merci beaucoup