reactjs - 如何在 Three.js 中为对象添加纹理？

Question

我正在使用three.js 将纹理放置到对象上。导入的包是“three”、“@react-three/fiber”和“@react-three/drei”。问题是......加载纹理不是问题，但是当我尝试将纹理放入 Box 时，它会导致 ForwardRef 错误。

立方体组件

    const texture = useTexture(
        'http://localhost:4000/static/fab18332-ec32-4c2d-bd5b-4da57fd40d6a_claudio-testa--SO3JtE3gZo-unsplash.jpg',
      )
    return (
      <Box args={[5, 2, 1]} position={[0, 0, 0.74]} rotation={[0, 0, 0]}>
              <meshBasicMaterial attach="material" map={texture} />
      </Box>
    )

错误

The above error occurred in the <ForwardRef(Canvas)> component:
Consider adding an error boundary to your tree to customize error handling behavior.
Uncaught Error: ForwardRef(Canvas) suspended while rendering, but no fallback UI was specified.
Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.

Canvas 组件在另一个文件中，并且 Cube 组件在其中导入。

画布组件

import { Canvas, useFrame } from '@react-three/fiber'
import Cube from './test'

const TCanvas = () => {
  return (
    <Canvas>
      <Cube/>
    </Canvas>
  )
}

export default TCanvas