How animate multiple glb models

Questions
,
1

I have a problem, when a import my glb file, I don’t know how to play its animations.

                const loader = new GLTFLoader();
                loader.load( 'models/soldier.glb', function ( gltf ) {
                     while(gltf.scene.children.leght){
                          console.log(gltf.scene.children[0])
                          scene.add(gltf.scene.children[0])
                        }
                        console.log(gltf)
                        gltf.scene.position.x = 0;
                        gltf.scene.position.y = 0;
                        gltf.scene.position.z = 0;
                        gltf.scene.scale.set(5,5,5)
                        gltf.scene.rotation.y = 360
                        //model = gltf.scene;
                        scene.add( gltf.scene )
                        mixer = new THREE.AnimationMixer( gltf.scene );
                        mixer.clipAction( gltf.animations[0] ).play();
                        
                    }, function ( xhr ) {
                    console.log( (xhr.loaded/xhr.total*100)+"% loaded" )
                    },function ( error ){
                            console.log("error:")
                    })

image
image1871×667 136 KB

element_001_hydrogen.glb (209.2 KB)

element_019_potassium.glb (2.5 MB)

atom.html (8.2 KB)

2

Are you updating the animation mixer in your animation loop? You usually want something like this:

const delta = clock.getDelta();

if ( mixer ) mixer.update( delta );
3

I update this code, but dont animated my model

4

Hi,
When I’m loading the atom GLB files in my test project, I can run the animations just fine.
Your sample code is referring to some soldier GLB. Maybe the issue is in that specific model file.

5

Could you share your code

6

I’ve added a demo here:

7

I still have errors in my code, could you help me by indicating the correct way to load the animations, I attach my code with its dependencies, thanks
atom.rar (860.8 KB)

8

Hi, using your code, I could reproduce and fix the issue. You are using threejs version 125. Please upgrade to the latest version (0.139.2).

1 Like