React-Three-Fiber动画中断后默认关键帧重置问题求助

核心思路 #

不管用哪种动画方式，关键是保留初始状态的快照，或者利用动画系统的重置机制，确保中断重置时能精准回到初始关键帧。

具体解决方案 #

1. 手动保存初始状态快照 #

在组件挂载时，克隆并保存模型/对象的初始位置、旋转、缩放等属性，重置时直接覆盖回去。适用于手动驱动的动画或简单属性动画。

import { useRef, useEffect } from 'react';
import { useFrame } from '@react-three/fiber';

function AnimatedMesh() {
  const meshRef = useRef(null);
  const initialTransform = useRef({});

  // 挂载时保存初始状态
  useEffect(() => {
    if (!meshRef.current) return;
    initialTransform.current = {
      position: meshRef.current.position.clone(),
      rotation: meshRef.current.rotation.clone(),
      scale: meshRef.current.scale.clone()
    };
  }, []);

  // 重置函数
  const resetToDefault = () => {
    if (!meshRef.current || !initialTransform.current) return;
    const { position, rotation, scale } = initialTransform.current;
    meshRef.current.position.copy(position);
    meshRef.current.rotation.copy(rotation);
    meshRef.current.scale.copy(scale);
    
    // 如果用了GSAP等第三方动画库，先终止当前动画
    // gsap.killTweensOf(meshRef.current);
  };

  // 示例：手动驱动动画
  useFrame((_, delta) => {
    if (!meshRef.current || !isAnimating) return;
    meshRef.current.position.x += delta * 2;
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry />
      <meshStandardMaterial color="#ff4444" />
    </mesh>
  );
}

2. 利用Three.js AnimationMixer的重置API #

如果用的是模型自带的关键帧动画（比如GLTF模型），通过AnimationMixer和AnimationAction的内置方法重置动画状态：

import { useRef, useEffect } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
import * as THREE from 'three';

function AnimatedGLTFModel({ model }) {
  const meshRef = useRef(null);
  const mixerRef = useRef(null);
  const activeAction = useRef(null);

  useEffect(() => {
    if (!meshRef.current || !model) return;
    // 初始化动画混合器
    mixerRef.current = new THREE.AnimationMixer(meshRef.current);
    // 创建动画动作，设置仅播放一次
    activeAction.current = mixerRef.current.clipAction(model.animations[0]);
    activeAction.current.setLoop(THREE.LoopOnce);
    activeAction.current.clampWhenFinished = true;
  }, [model]);

  // 更新动画帧
  useFrame((_, delta) => {
    mixerRef.current?.update(delta);
  });

  const resetToDefault = () => {
    if (!mixerRef.current || !activeAction.current) return;
    // 停止当前动画
    activeAction.current.stop();
    // 重置动作到初始关键帧
    activeAction.current.reset();
    // 重置混合器时间轴到0
    mixerRef.current.time = 0;
    mixerRef.current.update(0);
  };

  return <primitive ref={meshRef} object={model.scene} />;
}

3. 状态驱动的帧动画（避免直接修改对象） #

如果是用useFrame手动写的动画，用状态变量控制进度，重置时直接将进度设为0并恢复初始属性：

import { useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber';

function AnimatedBox() {
  const meshRef = useRef(null);
  const [isAnimating, setIsAnimating] = useState(false);
  const [animProgress, setAnimProgress] = useState(0);

  useFrame((_, delta) => {
    if (!isAnimating || animProgress >= 1) {
      setIsAnimating(false);
      return;
    }
    // 用进度值计算动画状态
    setAnimProgress(prev => prev + delta * 0.6);
    if (meshRef.current) {
      meshRef.current.position.x = animProgress * 6;
    }
  });

  const resetToDefault = () => {
    setIsAnimating(false);
    setAnimProgress(0);
    // 强制重置到初始位置
    meshRef.current?.position.set(0, 0, 0);
  };

  return (
    <mesh ref={meshRef} onClick={() => setIsAnimating(true)}>
      <boxGeometry />
      <meshStandardMaterial color="#4488ff" />
    </mesh>
  );
}

关键注意点 #

• 如果使用第三方动画库（如GSAP、Framer Motion），重置时务必先终止当前所有动画实例，再恢复初始状态，避免动画继续修改属性。
• 对于复杂模型，保存初始状态时要递归处理子对象（如果需要重置子组件的动画）。

内容的提问来源于stack exchange，提问作者Philip Sopher