如何在react-三纤维画布中添加jsx组件？

Question

我想在反应三纤维画布中插入一个 jsx 组件。有办法做到吗？

我已经分叉了一个官方示例，它具有无限滚动功能。每个元素都是来自 的图像@react-three/drei。假设我有一组组件。我如何放置它们才能达到相同的效果？

代码是：

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

这里还有一个codesandbox。谢谢你！

Answer 1

r3f 是一个渲染器，canvas 内的所有内容都会渲染到 Threejs 中。画布内的“div”与“new THREE.Div()”相同，但不存在。就像你试图写一个内部的react-dom一样。你可以在canvas元素之前或之后放置html。您也可以将其包含在其中，但只能使用像 drei/Html 这样的帮助程序，它将 html 与网格或组位置联系起来。查看示例，该用例有很多：https://docs.pmnd.rs/react- Three -Fiber/getting-started/examples