Render with react-three-fiber (r3f) into existing vanilla three.js Group / Object3D / Scene

Questions
1

With React-DOM I can render into any < div > on the page - it does not have to be the root of the page. I would like to do something similar with r3f. I have an existing three.js based application and would like to render into an existing Object3D or Group with r3f. Has anyone tried this before? How much effort would it be? It looks like the r3f app needs to include a < Canvas > at the moment.

This question is related to Combine React-three-fiber and threeJS code - but the solutions there discuss the opposite direction: starting with r3f and then using vanilla three.js.

2

you can do that, and there are many ways. but there is a major difference between the dom and threejs. the dom does not render, or it does but you’re not calling render(scene, camera) on it. it is better to let fiber do the rendering because it is much more optimized. if you can, just switch your global vanilla loop off and now feed fiber your scene:

<Canvas camera={yourCamera}>
  <ImperativeStuff />

function ImperativeStuff() {
  useFrame((state) => {
    // everything that used to be in your render loop
    // except gl.render(scene, camera)
    // if you give fiber your camera you also don't need to
    // listen to resize and calculate aspect-ratio
  })
  return <primitive object={yourScene} />

if that’s not possible and vanilla must control it, you can also just render into it:

import { Canvas, createPortal } from '@react-three/fiber'

<Canvas frameloop="never">
  <Portal />

function Portal() {
  return createPortal(<App>, yourScene)

but i now you’re loosing events, useFrame, viewport calculation, responsive resize, responsive camera, …

3

I am sorry for the late response, I got distracted with other things. This is a great reply - thank you so much! I’ll give it a try :slight_smile: