如何在从@theatre/core获取JSON文件后,使用react three fiber动画相机?

huangapple go评论96阅读模式
英文:

How to animate a camera after getting a JSON file from @theatre/core with react three fiber?

问题

在从 main.jsx 中移除了 studio 后,相机停在第一帧。唯一的方式是使用滚动才能移动相机,但我想要在首次访问网站时开始动画并停止。

以下是 App.jsx 的内容:

  1. import { Canvas, useFrame } from '@react-three/fiber';
  2. import './App.css';
  3. import { Test } from './components/test';
  4. import { getProject, val } from '@theatre/core';
  5. import { SheetProvider, PerspectiveCamera, useCurrentSheet } from '@theatre/r3f';
  6. import flyThroughState from './assets/CamAni.json';
  7. function App() {
  8. const sheet = getProject('Fly Through', { state: flyThroughState }).sheet("Scene");
  9. return (
  10. <>
  11. <Canvas gl={{ preserveDrawingBuffer: true }}>
  12. <SheetProvider sheet={sheet}>
  13. <Scene />
  14. </SheetProvider>
  15. </Canvas>
  16. </>
  17. );
  18. }
  19. 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:

  1. import { Canvas, useFrame } from &#39;@react-three/fiber&#39;;
  2. import &#39;./App.css&#39;;
  3. import { Test } from &#39;./components/test&#39;;
  4. import { getProject, val } from &#39;@theatre/core&#39;;
  5. import { SheetProvider , PerspectiveCamera, useCurrentSheet} from &#39;@theatre/r3f&#39;;
  6. import flyThroughState from &#39;./assets/CamAni.json&#39;;
  7. function App() {
  8. const sheet = getProject(&#39;Fly Through&#39;,{state: flyThroughState}).sheet(&quot;Scene&quot;)
  9. return (
  10. &lt;&gt;
  11. &lt;Canvas gl={{ preserveDrawingBuffer: true }}&gt;
  12. &lt;SheetProvider sheet={sheet}&gt;
  13. &lt;Scene /&gt;
  14. &lt;/SheetProvider&gt;
  15. &lt;/Canvas&gt;
  16. &lt;/&gt;
  17. )
  18. }
  19. export default App

how can i get the camera to animate with the json file i got from Fly Through ?

答案1

得分: 0

  1. 如果有人在将来需要这个这里是我修复的代码
  2. ~~~
  3. function App() {
  4. const sheet = getProject('飞越',{state: flyThroughState}).sheet('场景')
  5. useEffect(() => {
  6. sheet.project.ready.then(() => sheet.sequence.play({ iterationCount:1, range: [0, 3] }))
  7. }, [])
  8. return (<>
  9. <Canvas gl={{ preserveDrawingBuffer: true }}>
  10. <SheetProvider sheet={sheet}>
  11. <Scene />
  12. </SheetProvider>
  13. </Canvas>
  14. </>
  15. )
  16. }
  17. export default App
  18. ~~~
英文:

If anyone need this in the futur, here's the code I fixed it.

  1. function App() {
  2. const sheet = getProject(&#39;Fly Through&#39;,{state: flyThroughState}).sheet(&quot;Scene&quot;)
  3. useEffect(() =&gt; {
  4. sheet.project.ready.then(() =&gt; sheet.sequence.play({ iterationCount:1, range: [0, 3] }))
  5. }, [])
  6. return (&lt;&gt;
  7. &lt;Canvas gl={{ preserveDrawingBuffer: true }}&gt;
  8. &lt;SheetProvider sheet={sheet}&gt;
  9. &lt;Scene /&gt;
  10. &lt;/SheetProvider&gt;
  11. &lt;/Canvas&gt;
  12. &lt;/&gt;
  13. )
  14. }
  15. export default App

huangapple
  • 本文由 发表于 2023年7月24日 16:59:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76752867.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定