此浏览器无法识别标记<primitive>

Question

import React, { Suspense } from 'react'
import { useGLTF } from '@react-three/drei'

const MagicRoom = () => {
  // Importing model
  const Model = () => {
    const gltf = useGLTF('./libs/the_magic_room/scene.gltf', true)
    return <primitive object={gltf.scene} dispose={null} scale={1} />
  }
  return (
    <Suspense fallback={null}>
      <Model />
    </Suspense>
  )
}

export default MagicRoom

我尝试使用primitive在react-fibre中导入gltf模型，但它给出了上面的错误

Answer 1

在@react-three/fiber，中可以找到primitive占位符，导入此模块将解决此错误。因此，最终的代码如下所示：

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'

const MagicRoom = () => {
  // Importing model
  const Model = () => {
    const gltf = useGLTF('./libs/the_magic_room/scene.gltf', true)
    return <primitive object={gltf.scene} dispose={null} scale={1} />
  }
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Model />
      </Suspense>
    </Canvas>
  )
}

export default MagicRoom