How animate multiple glb models

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 ) {
                        gltf.scene.position.x = 0;
                        gltf.scene.position.y = 0;
                        gltf.scene.position.z = 0;
                        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/*100)+"% loaded" )
                    },function ( error ){

element_001_hydrogen.glb (209.2 KB)

element_019_potassium.glb (2.5 MB)

atom.html (8.2 KB)

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 );

I update this code, but dont animated my model

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.

Could you share your code

I’ve added a demo here:

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)

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