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

[AndrewRayCode]

Again i'm a reconciler newcomer, but these lines look suspect in the createInstance method:

https://github.com/drcmda/react-three-fiber/blob/master/src/reconciler.js#L129-L130

    const target = catalogue[name] || THREE[name]
    instance = Array.isArray(args) ? new target(...args) : new target(args)

Two things seem to happen. First, the error itself seems to be getting eaten somewhere, but I'm not sure where. All that's logged is

The above error occurred in the <ul> component:
    in ul (created by SelectableMenu)

But the error itself seems to be logged after that statement:

Uncaught TypeError: target is not a constructor

This error itself isn't this most obvious to debug.

Why would I want to put a <div> inside a <Canvas> you ask? I'm using react-portal to make my 3d menu element also be able to render a DOM element, and have both the 3d element and GUI element use the same props. It's pretty convenient.

That doesn't seem compatible with this library. Do you have a suggestion for another approach?

[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().

[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

[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