如何基于@theatre/core的JSON文件在React Three Fiber中自动播放相机动画？

移除Studio组件后，Theatre.js不会自动触发动画播放，需要手动调用sheet的播放API来实现页面加载时自动播放相机动画。以下是修改后的代码及关键说明：

修改后的App.jsx代码 #

import { Canvas, useFrame } from '@react-three/fiber';
import './App.css';
import { Test } from './components/test';
import { getProject, val } from '@theatre/core';
import { SheetProvider, PerspectiveCamera, useCurrentSheet } from '@theatre/r3f';
import flyThroughState from './assets/CamAni.json';
import { useEffect } from 'react';

function App() {
  const sheet = getProject('Fly Through', { state: flyThroughState }).sheet("Scene");

  // 页面挂载后自动播放相机动画
  useEffect(() => {
    // 播放完整的动画序列（0为起始帧，1为结束帧）
    const playTask = sheet.play({
      range: [0, 1],
      rate: 1, // 正常播放速度，可按需调整
    });

    // 可选：监听动画完成事件
    playTask.then(() => {
      console.log("相机飞行动画已播放完成");
    });

    // 组件卸载时停止动画，避免内存泄漏
    return () => {
      sheet.stop();
    };
  }, [sheet]);

  return (
    <>
      <Canvas gl={{ preserveDrawingBuffer: true }}>
        <SheetProvider sheet={sheet}>
          <Scene />
        </SheetProvider>
      </Canvas>
    </>
  )
}

export default App;

关键实现逻辑 #

• 导入React的useEffect钩子，用于在组件首次挂载时执行一次性操作
• 调用sheet.play()方法触发动画：
  • range: [0, 1] 指定播放整个动画时间轴（Theatre.js中动画范围默认以0-1表示完整时长）
  • rate: 1 控制播放速度，1为正常速度，大于1是加速，小于1是减速
• 可选的playTask.then()回调可用于动画完成后的后续操作
• 清理函数确保组件卸载时停止动画，防止不必要的资源占用

内容的提问来源于stack exchange，提问作者Ziad Kaddari