How to add a jsx component inside a react-three-fiber canvas?

Question

I would like to insert a jsx component inside a react-three-fiber canvas. Is there a way to do it?

I've forked an official exemple, that features an infinite scroll. Each element is an image from @react-three/drei. Let's imagine I have an array of components instead. How could I position them to achieve the same effect?

The code is:

import { Suspense, useRef } from 'react'
import { Canvas, useThree } from '@react-three/fiber'
import { ScrollControls, Scroll, Preload, Image as ImageImpl } from '@react-three/drei'

function Image(props) {
  const ref = useRef()
  const group = useRef()

  return (
    <group ref={group}>
      <ImageImpl ref={ref} {...props} />
    </group>
  )
}
function Card() {
  return (
    <div style={{ background: '#red', width: 200, height: '100%', borderRadius: 8 }}>
      <h3>hello world</h3>
      <p>great text here!</p>
    </div>
  )
}

function Page({ m = 0.4, urls, ...props }) {
  const { width } = useThree((state) => state.viewport)
  const w = width < 10 ? 1.5 / 3 : 1 / 3
  return (
    <group {...props}>
      <Image position={[-width * w, 0, -1]} scale={[width * w - m * 2, 5, 1]} url={urls[0]} />
      <Image position={[0, 0, 0]} scale={[width * w - m * 2, 5, 1]} url={urls[1]} />
      <Image position={[width * w, 0, 1]} scale={[width * w - m * 2, 5, 1]} url={urls[2]} />
    </group>
  )
}

function Pages() {
  const { width } = useThree((state) => state.viewport)
  return (
    <>
      <Page position={[-width * 1, 0, 0]} urls={['/trip1.jpg', '/trip2.jpg', '/trip3.jpg']} />
      <Page position={[width * 0, 0, 0]} urls={['/img1.jpg', '/img2.jpg', '/img3.jpg']} />
      <Page position={[width * 1, 0, 0]} urls={['/img4.jpg', '/img5.jpg', '/img6.jpg']} />
      {/* INSERT JSX COMPONENT HERE */}
      {/* <Card />*/}
      <Page position={[width * 2, 0, 0]} urls={['/trip1.jpg', '/trip2.jpg', '/trip3.jpg']} />
      <Page position={[width * 3, 0, 0]} urls={['/img1.jpg', '/img2.jpg', '/img3.jpg']} />
      <Page position={[width * 4, 0, 0]} urls={['/img4.jpg', '/img5.jpg', '/img6.jpg']} />
    </>
  )
}

export default function App() {
  return (
    <Canvas gl={{ antialias: false }} dpr={[1, 1.5]}>
      <Suspense fallback={null}>
        <ScrollControls infinite horizontal damping={4} pages={4} distance={1}>
          <Scroll>
            <Pages />
          </Scroll>
        </ScrollControls>
        <Preload />
      </Suspense>
    </Canvas>
  )
}

Here is also a codesandbox. Thank you!

Answer 1

r3f is a renderer, everything inside canvas renders into threejs. a "div" inside canvas is the same as "new THREE.Div()" and that doesn't exist. same as if you tried to write a inside react-dom. you can have html before or after the canvas element. you can also have it within, but only by using helpers like drei/Html which ties html to a meshs or a groups whereabouts. check out the examples, there are tons for that usecase: https://docs.pmnd.rs/react-three-fiber/getting-started/examples