0

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 ?

Ziad Kaddari
  • 3
  • 1

1 Answers1

0

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
Ziad Kaddari
  • 3
  • 1
  • Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly [edit] your answer to include additional details for the benefit of the community?** – Jeremy Caney Jul 31 '23 at 00:39