Glb animation not being read

Questions
,
1

Hello,

I have a simple cube with simple animation

cube.glb (3.4 KB)

loaded it as follow:

const gltf = await loader.loadAsync('./assets/cube.glb');
console.log(gltf.scene);

but in gltf.scene.animation, array length is 0 (children as well), when model viewed in online gltf viewer it loads the animation correctly! am I doing something woring?

Edit: The problem is I can’t play the animation, error:

main.js:101 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')

Blender export settings:

Capture
Capture562×815 48.5 KB

Thanks

2

Work good. Try this

webgl_loader_gltf_cube_2.html (3.4 KB)

1 Like
3

x Sorry but I think the link is broken x

edit my bad, I thought it’s a link. I’ll check the code you’ve sent

1 Like
4

According to the docs, the animations are in gltf, not gltf.scene. Do you have animations if you use gltf.animations instead of gltf.scene.animation?

1 Like
5

I just checked and it does have the animation in the gltf not in the scene, yet same error!

my code

const cube = await loader.loadAsync('./assets/cube.glb', (gltf) => {
  const model = gltf.scene;
  mixer = new THREE.AnimationMixer(model);
  mixer.clipAction(gltf.animations[0]).play();
});
6

This code is kind of mixing both styles: What does happen if you use only one of the styles:

const cube = await loader.loadAsync('./assets/cube.glb');
...

or

loader.load('./assets/cube.glb', (gltf) => {...});
2 Likes
7

I think it was async problem! but now it works, my code:

const loader = new GLTFLoader();
const cube = await loader.loadAsync('./assets/cube.glb');
const mixer = new THREE.AnimationMixer(cube.scene);
const action = mixer.clipAction(cube.animations[0]);
action.play();
scene.add(cube.scene);

Thanks for the help!

1 Like
8

Thanks for the help as well!

1 Like