Error in the animation loop time

I’m studying three.js and making some experiments. I created a div and inserted the canvas inside this div to show a 3D model just in one part of my html/css website. After loading this model, I started to search how to initiate the gltf animation.

const loader = new GLTFLoader();
const mixer = new THREE.AnimationMixer()

// Load a glTF resource
	// resource URL
	// called when the resource is loaded
	function ( gltf ) {
    const model = gltf.scene

    const animationClip = gltf.animations[0];

    const action = mixer.clipAction(animationClip, model);;

const clock = new THREE.Clock();

const animation = () => {
  renderer.render(scene, camera);


I don’t know why, but when I start the animation everything looks duplicating and a lot fast. I think that I’m making mistakes on the clock usage, but I don’t get how to solve this. Can anyone help, please?

This is the original animation:
A Windy Day - Download Free 3D model by Loïc Norgeot (@norgeotloic) [fb78f4c] (

I made a OBS video from my animation: animationerror.mp4 - Google Drive

Thank you for reading!

Did u open the file in a 3d Software …
Because the file is corrupt … not the same as the preview but the same as your video messy speedy and ugly

1 Like

I openned now in Blender. I’m having the same problem there when I play the animation.


I’ve written a comment at stackoverflow.

tl;dr I guess the issue is caused by the Sketchfab glTF exporter.

1 Like

Thank you, Mugen!
I’ll use another model in the project. I tested another two yesterday and they worked.

1 Like