标签 <primitive> 在此浏览器中无法识别

【问题标题】：The tag <primitive> is unrecognized in this browser标签 <primitive> 在此浏览器中无法识别
【发布时间】：2021-12-09 17:19:42
【问题描述】：

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-fiber 中导入 gltf 模型，但它给出了上述错误

【问题讨论】：

标签： three.js react-three-fiber drei

【解决方案1】：

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

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

【讨论】：