英文:
How to animate a camera after getting a JSON file from @theatre/core with react three fiber?
问题
在从 main.jsx 中移除了 studio 后，相机停在第一帧。唯一的方式是使用滚动才能移动相机，但我想要在首次访问网站时开始动画并停止。
以下是 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';
function App() {
const sheet = getProject('Fly Through', { state: flyThroughState }).sheet("Scene");
return (
<>
<Canvas gl={{ preserveDrawingBuffer: true }}>
<SheetProvider sheet={sheet}>
<Scene />
</SheetProvider>
</Canvas>
</>
);
}
export default App;
如何使用我从 Fly Through 获取的 JSON 文件使相机进行动画？
英文:
After removing the studio from main.jsx the camera stops at the first frame.
The only way i got it to move is using scroll but i want the animation to start when first getting in the website and stopping.
here's 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';
function App() {
const sheet = getProject('Fly Through',{state: flyThroughState}).sheet("Scene")
return (
<>
<Canvas gl={{ preserveDrawingBuffer: true }}>
<SheetProvider sheet={sheet}>
<Scene />
</SheetProvider>
</Canvas>
</>
)
}
export default App
how can i get the camera to animate with the json file i got from Fly Through ?
答案1
得分: 0
如果有人在将来需要这个，这里是我修复的代码。
~~~
function App() {
const sheet = getProject('飞越',{state: flyThroughState}).sheet('场景')
useEffect(() => {
sheet.project.ready.then(() => sheet.sequence.play({ iterationCount:1, range: [0, 3] }))
}, [])
return (<>
<Canvas gl={{ preserveDrawingBuffer: true }}>
<SheetProvider sheet={sheet}>
<Scene />
</SheetProvider>
</Canvas>
</>
)
}
export default App
~~~
英文:
If anyone need this in the futur, here's the code I fixed it.
function App() {
const sheet = getProject('Fly Through',{state: flyThroughState}).sheet("Scene")
useEffect(() => {
sheet.project.ready.then(() => sheet.sequence.play({ iterationCount:1, range: [0, 3] }))
}, [])
return (<>
<Canvas gl={{ preserveDrawingBuffer: true }}>
<SheetProvider sheet={sheet}>
<Scene />
</SheetProvider>
</Canvas>
</>
)
}
export default App
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论