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

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]

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} />
}

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

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

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

[drcmda]

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