Hello, I’m trying to build a kind of a model configurator mini game in react three fiber where users can remove individual children parts of a model, and reattach them back. These removal of parts are followed by animations followed by these parts being set at some final positions. Although the animations play fine the first time around, any changes to the individual children parts like changing their positions, or removing them and setting them at a different position, make the animation non-playable if tried again after reattaching them back. I am unable to figure out what the issue may be. Any help would be appreciated.
Here’s how I load animations:
useEffect(() => {
if (gltf) {
const model = gltf.scene;
modelRef.current = model;
const mixer = new THREE.AnimationMixer(model);
setAnimationMixer(mixer);
model.traverse((child) => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
// Once everything is set
setIsLoaded(true);
}
}, [gltf, scene]);
return { modelRef, gltf, animationMixer, isLoaded };
};
These are passed to another component where animations are played out like this:
if (animationType === 'removalAnimation') {
if (partData && animationMixer) {
const animationData = partData[animationType];
const clip = THREE.AnimationClip.findByName(clips, animationData.name);
if (clip) {
const action = animationMixer.clipAction(clip);
if (action) {
action.setLoop(THREE.LoopOnce);
action.clampWhenFinished = true;
if (!partData.Combined){
console.log("Action is: ",action)
action.play();
}
const keyframeStart = animationData.keyframes.start / clip.tracks[0].times.length * clip.duration;
const keyframeEnd = animationData.keyframes.end / clip.tracks[0].times.length * clip.duration;
const playDuration = keyframeEnd - keyframeStart;
action.time = keyframeStart;
action.setEffectiveTimeScale(1);
let elapsedTime = 0;
captureDefaultTransforms(modelData.modelName, partName)
const interval = setInterval(() => {
elapsedTime += 0.016; // Assume 60 fps
if (elapsedTime >= playDuration - 0.016) {
if (partMesh && partData && partData.finalState) {
const worldPosition = new THREE.Vector3();
const worldQuaternion = new THREE.Quaternion();
const worldScale = new THREE.Vector3();
partMesh.getWorldPosition(worldPosition);
partMesh.getWorldQuaternion(worldQuaternion);
partMesh.getWorldScale(worldScale);
// Detach the partMesh from its parent and add it to the scene
partMesh.parent.remove(partMesh);
scene.add(partMesh);
// Set its world position, rotation, and scale (preserving its world transform)
partMesh.position.copy(worldPosition);
partMesh.quaternion.copy(worldQuaternion);
partMesh.scale.copy(worldScale);
// Tween to the final state
new TWEEN.Tween(partMesh.position)
.to(partData.finalState.position, 1000)
.easing(TWEEN.Easing.Quadratic.Out)
.start();
new TWEEN.Tween(partMesh.quaternion)
.to(partData.finalState.rotation, 1000)
.easing(TWEEN.Easing.Quadratic.Out)
.start();
new TWEEN.Tween(partMesh.scale)
.to(partData.finalState.scale, 1000)
.easing(TWEEN.Easing.Quadratic.Out)
.start();
}
}
if (elapsedTime >= playDuration) {
clearInterval(interval);
action.stop();
}
}, 16);
} else {
console.error(`Animation clip not found: ${partData.animation.name}`);
}
} else {
console.error(`Part data not found: ${partName} or AnimationMixer not defined.`);
}
You can see how parts are being removed after playing the animations after certain frames. The issue is that after removal, the animations don’t playout as expected on attaching the parts back. This is how I add the parts back to the model:
if (part) {
if (!modelRef.current.getObjectByName(part.name)) {
modelRef.current.add(part);
const { position, rotation, scale } = partData.defaultTransform;
part.position.set(position.x, position.y, position.z);
part.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w);
part.scale.set(scale.x, scale.y, scale.z);
}
}
The part in this are all meshes stored before of the parts that were removed. So, basically, after adding the parts back and triggering the animations, they don’t play and the part generally shifts to the final position without animations.