theatre
theatre copied to clipboard
Context error when using drei PositionalAudio (R3F)
I am using Theatre.js to animate the PerspectiveCamera in a R3F project. I get context and SheetProvider error when adding PositionalAudio drei helper to the project. The project works correctly if I don't use drei PositionalAudio or if I disable the SheetProvider and camera animations but not both. My dependencies are using the latest versions as of 09/2023:
"@react-three/drei": "^9.83.9",
"@react-three/fiber": "^8.14.2",
"@theatre/core": "^0.7.0",
"@theatre/r3f": "^0.7.0",
"@theatre/studio": "^0.7.0",
"leva": "^0.9.35",
"r3f-perf": "^7.1.2",
"react": "18.2",
"react-dom": "18.2",
"three": "^0.156.1",
"zustand": "^4.4.1"
Uncaught TypeError: Cannot read properties of undefined (reading 'context')
at new Audio (three.module.js:45703:27)
at new PositionalAudio (three.module.js:46102:3)
at PositionalAudio.clone (three.module.js:8004:10)
at Group.copy (three.module.js:8045:21)
at Group.clone (three.module.js:8004:33)
at Scene.copy (three.module.js:8045:21)
at Scene.copy (three.module.js:30543:9)
at Scene.clone (three.module.js:8004:33)
at store.ts:101:37
at setState2 (vanilla.js:10:53)
The above error occurred in the <SheetProvider> component:
at SheetProvider (http://localhost:5173/@fs/C:/Users/msv/Documents/LOCAL/3js/52-cosmic%20laptop/node_modules/.vite/deps/@theatre_r3f.js?v=6fc3209c:240:24)
at Experience (http://localhost:5173/Experience.jsx:37:17)
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/@fs/C:/Users/msv/Documents/LOCAL/3js/52-cosmic%20laptop/node_modules/.vite/deps/chunk-FFSAURTR.js?v=6fc3209c:16137:5)
at FiberProvider (http://localhost:5173/@fs/C:/Users/msv/Documents/LOCAL/3js/52-cosmic%20laptop/node_modules/.vite/deps/chunk-FFSAURTR.js?v=6fc3209c:17870:21)
at Provider (http://localhost:5173/@fs/C:/Users/msv/Documents/LOCAL/3js/52-cosmic%20laptop/node_modules/.vite/deps/chunk-FFSAURTR.js?v=6fc3209c:17488:3)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
The error is resolved if I disable the use of Theatre.js by removing SheetProvider and control over the perspective camera.
<SheetProvider sheet={demoSheet}>
<PerspectiveCamera theatreKey='Camera' makeDefault position={[-3, 1.5, 4]}
rotation={[-0.3587706702705722, -0.612232348422086, -0.2122644493432918]} fov={45} />
</SheetProvider>
https://github.com/pmndrs/drei#positionalaudio