Can't use non-three.js elements like <div> inside a <Canvas>? about react-three-fiber

[drcmda]

useThree is context based, it only works inside canvas. But it goes deeper, generally the real three canvas isn't created in line with the Canvas component. Just because Canvas has rendered and the parent gets its useEffect ping doesn't mean that the three js stuff is ready yet. React decides when it will render, and it seems to do it async by default. So the only safe way is to pass the camera up when it becomes available.

But you still have multiple options here.

1. Canvas has a onCreated event that gives you the cam (+ state)

function Parent() {
  return <Child onCreated={({ camera }) => console.log(camera)} />
}

function Child(props) {
  return <Canvas {...props} />
}

2. Canvas can render a function child that gives you the cam (+ state)

<Canvas>
  {({ camera }) => ... }

3. Create and manage your own camera: https://github.com/drcmda/react-three-fiber#heads-up-display-rendering-multiple-scenes

[drcmda]

See #34

A reconciler renders JSX into a target. react-dom renders into the dom, react-three-fiber renders into a threejs scene. You can't mount a div into a scene.

[AndrewRayCode]

Makes sense. I was able to do it with react-three-renderer but I don't think that uses a customer reconciler internally.

[giulioz]

May it be possible to use useThree() hook outside of Canvas elements?
I need to have a ref to the camera for using with DOM components outside of canvas, and the only way I found to do so is using a component inside which passes the camera to parent with an event, but it's ugly.

A solution may be adding something like domChildren prop to , to have them excluded by the renderer but still be able to access useThree().

[linonetwo]

Can CSS2DRenderer in THREE fits in this situation?

[drcmda]

yes, you can exchange the renderer: https://github.com/drcmda/react-three-fiber/blob/master/readme.md#switching-the-default-renderer