Using Fiber outside <Canvas/>?

[erikpa1]

Hi, my question/request is

can I use Fiber outside of < Canvas /> with some hack ?, not sure if its event possible but there is no price for asking,.... Thing is I have already written project (360 virtual tour player, with panorama partional loading (via multiple materials....), a lot of effects for panorama transitions,... mesh loadings,....), which I want to expand but core is written in vanila three js. Code change will take me a lot of time (which I don't have plus I have custom modifications of some threejs classes) plus I have my code already tested, and all bugs caught.

Something I imagine:

const compatibilityWrapper = new CompatilityWrapper(< mesh >.....< /mesh >);
scene.add(compatibilityWrapper)

[CodyJasonBennett]

Maybe see https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide#createportal-creates-a-state-enclave. This will render JSX elements into a foreign element (e.g. a scene).

const scene = new THREE.Scene()
const gl = new THREE.WebGLRenderer()
const camera = new THREE.PerspectiveCamera()

// Portal <mesh /> into scene and overwrite its useThree state
createPortal(<mesh />, scene, { scene, gl, camera })

[patrickbenjamin1]

From my use, I've found I can only use createPortal in a component inside a <Canvas /> presumably because it needs the context from the Canvas. Otherwise it throws this error

react-dom.development.js:22839 Uncaught R3F hooks can only be used within the Canvas component!

I raised this question on stack about it.

It works absolutely fine when wrapped up in that, and can portal into my main big canvas perfectly well, but with this implementation, it pollutes the DOM with tonnes of empty canvases. I haven't gone especially far with it yet, but I imagine there'll be other issues as I continue.

Is there a way of providing that context otherwise?

The use case if it helps is that I have one big canvas on top of everything, then most of my document is made up of normal DOM elements, but then I use components to render stuff into the canvas
i.e.

export const Card = () => (
  <div className="card">
      <div className="card-image">
         <ThreeElement>
                <mesh />
         </ThreeElement>
     </div>
     <p>hello this is some text underneath the thing</p>
  </div>
)

then the contents of ThreeElement get portaled into a <group /> element inside the one main big canvas which is automatically positioned to the centre of .card-image. It means data can still flow downards from the Card component, and I can let the browser lay stuff out in the flow of the document, but only one canvas is used so everything in it can talk to eachother.

[patrickbenjamin1]

Thinking about it, my approach might be unworkable as no matter what it's going to need the context from the Canvas I'm trying to portal it into to be able to use useFrame and such but a portal won't actually achieve that, so maybe I need to rethink my approach.

[drcmda]

From my use, I've found I can only use createPortal in a component inside a <Canvas /> presumably because it needs the context from the Canvas. Otherwise it throws this error

you need a canvas, all your logic and the stuff you want to show lives there but it can render into a foreign object like cody said, it will itself render nothing because its scene will remain empty. createPortal itself is then contextual to the canvas. I think you would have full functionality, even pointer events.

<Canvas>
  <MyOverlay target={anyObjectFromYourVanillaProject}>
    <mesh />
  </MyOverlay>
</Canvas>

function MyOverlay({ target, children }) {
  return createPortal(children, target)
}

[drcmda]

there is also another alternative where you start up fiber oassing it your canvas, webglrender, camera, scene, which it will then re-use. thereby you're allowing it to create the render-loop, but everything you add to <Canvas> now will be declarative and additional to what you already have in vanilla.

[drcmda]

ps here's an example using method 2, letting fiber control the rendering which imo is the better solition although # 1 will certainly work as well. https://codesandbox.io/s/threejs-basic-example-forked-i7krx4?file=/src/index.js

[Jonathynlee]

You can use Views like this example: https://codesandbox.io/s/bp6tmc?file=/src/App.js to achieve what you want.