Error in the animation loop time

Questions
, ,
1

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.

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

// Load a glTF resource
loader.load(
	// resource URL
	'/Windy/scene.gltf',
	// called when the resource is loaded
	function ( gltf ) {
    const model = gltf.scene
    scene.add(model);

    const animationClip = gltf.animations[0];
    console.log(animationClip)

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

const clock = new THREE.Clock();

const animation = () => {
  controls.update()
  mixer.update(clock.getDelta());
  renderer.render(scene, camera);
  window.requestAnimationFrame(animation);
};

animation();

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] (sketchfab.com)

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

Thank you for reading!

2

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
3

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

4

/cc

I’ve written a comment at stackoverflow.

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

1 Like
5

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

1 Like