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.