RecoilJS RecoilRoot not accessible within ThreeJS Canvas #1758
-
|
Hoping someone can help me out here. I am trying to manage the state of ThreeJS (via Fiber) objects in a scene with RecoilJS Atoms. In Viewer (code below), I get an error warning me that However, passing Declaring it within Debug also works, which is a sibling of Canvas sharing the same contexts This is fine for now, but the whole point of moving to Recoil was to stop passing props up and down. Am I missing something obvious or does the ThreeJS canvas somehow exist in a different scope. Any pointers would be appreciated. index.jsconst root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<RecoilRoot>
<App />
</RecoilRoot>
// </React.StrictMode>App.jsfunction App() {
return (
<div className="App">
<Viewer />
</div>
);
}Viewerconst LED = ({ led }) => {
const [hovered, setHoevered] = useState(false);
const [hoveredLED, setHoveredLEDAtom] = useRecoilState(hoveredLEDAtom);
const handleHoverEnter = () => {
setHoveredLEDAtom(led);
setHoevered(true);
};
const handleHoverExit = () => {
setHoevered(false);
};
return (
<mesh
onPointerOver={(event) => handleHoverEnter()}
onPointerOut={(event) => handleHoverExit()}
>
<coneGeometry />
<meshStandardMaterial
color={hovered || led.brightness > 125 ? "hotpink" : "grey"}
/>
</mesh>
);
};const Debug = () => {
const [hoveredLED, setHoveredLEDAtom] = useRecoilState(hoveredLEDAtom);
return (
<>
<div style={{ position: "absolute", left: "10px", top: "1rem" }}>
member : {hoveredLED.member}
</div>
</>
);
};const Viewer = () => {
const [model, setModel] = useRecoilState(modelAtom);
const [hoveredLED, setHoveredLEDAtom] = useRecoilState(hoveredLEDAtom);
useEffect(() => {
console.log(hoveredLED);
}, [hoveredLED]);
return (
<>
<Debug />
<Canvas camera={{ position: [5, 7, 5] }} style={{ height: "700px" }}>
<Helpers />
<OrbitControls />
{model.map((led, index) => {
const key = `led-${index}`;
return (
<LED key={key} led={led} />
);
})}
</Canvas>
</>
);
};
export default Viewer;Error |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
|
I have a similar problem with Babylon.js but embedding the component tree under the Recoil bridge results in the following error: Does the suggested workaround with |
Beta Was this translation helpful? Give feedback.
-
|
The bridge worked for me. How did you build your bridge? From @drarmstr :
So bridging the contexts is a simple as creating a bridge and nesting it within the ThreeJS Canvas const Viewer = () => {
const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();
...
return (
<>
<Canvas>
<RecoilBridge>
...
</RecoilBridge>
</Canvas>
</>
);
};
export default Viewer; |
Beta Was this translation helpful? Give feedback.
-
|
I think my usage isn't much different from the example you showed. The only difference I can see is that I'm using react-babylonjs which internally wraps a canvas element: const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE()
...
<Scene autoClear={false}
autoClearDepthAndStencil={false}
onSceneMount={args => setScene(args.scene)}>
<RecoilBridge>
<MainCamera/>
{scene && (
<>
<WalkControl enabled={viewMode == "3D"}/>
<PanControl enabled={viewMode == "2D"}/>
<Ground scene={scene}/>
<Wall scene={scene}/>
<DemoContent scene={scene}/>
<Overlay label={label}/>
</>
)}
</RecoilBridge>
</Scene>After all, the above snippet works perfectly under React 17.x but not 18, which suggests it could be some sort of a compatibility issue. |
Beta Was this translation helpful? Give feedback.
The bridge worked for me. How did you build your bridge?
From @drarmstr :
https://recoiljs.org/docs/api-reference/core/useRecoilBridgeAcrossReactRoots/
So bridging the contexts is a simple as creating a…