Animation of my chair is freezing my browser

Questions
1

I am trying to animate a chair, i imported the model in three js editor and its working completely fine. However, when i implement the same in my code it cause my chrome browser to hang and the animation is very jerky. I have to tell i am tinkering the code with suggestions from chatgpt and watching tutorial from youtube.

1)code while loading the model
//loading the model using the GLTF loader
const loader1 = new GLTFLoader();
loader1.load(
‘spin_chair.glb’,
function (gltf) {
model = gltf.scene;
model.position.set(0, 0.01, 0);
const mixer = new THREE.AnimationMixer(model);

    // Get animations from the GLTF data
    const animations = gltf.animations;
    
    if (animations && animations.length > 0) {
        const action = mixer.clipAction(animations[0]); // Use the appropriate animation index
        
        // Store the mixer and action for later use
        model.mixer = mixer;
        model.animation = action;

        // Start the animation
        action.play();
    }
model.traverse((child) => {
  if (child.isObject3D) child.castShadow = true;
});

scene.add(model);

},
undefined,
function (error) {
console.error(‘Error loading GLTF model:’, error);
}
);

2)code under animate()
function animate() {
requestAnimationFrame(animate);

// Update the mixer
if (model && model.mixer) {
model.mixer.update(clock.getDelta());
}
requestAnimationFrame(animate);
TWEEN.update();
renderer.render(scene, camera);
}

I can upload the entire code if its necessary. i modelled the chair in blender.

2

I live debuggable example would be the best. Otherwise it is like repairing a car by looking at a picture of the car.

At a first glance, there are two calls of requestAnimationFrame(animate) in your animate function. There must be only one.

1 Like