theatre-js / theatre

Motion design editor for the web
https://www.theatrejs.com
Apache License 2.0
10.82k stars 337 forks source link

Context error when using drei PositionalAudio (R3F) #451

Open sean369see opened 8 months ago

sean369see commented 8 months ago

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