react-three-fiber使用primitive加载GLTF提示浏览器不识别该标签如何解决

报错原因 #

<primitive> 是 react-three-fiber 提供的专属内置组件，仅能在 <Canvas> 组件的 3D 渲染作用域内被识别。如果直接在普通 React DOM 树中渲染该组件，React 会将其当做未知的原生 HTML 标签传递给浏览器，浏览器无法识别非标准的 <primitive> 标签，就会抛出该报错。
另外如果项目未正确安装 @react-three/fiber 依赖，或者依赖版本和 @react-three/drei 版本不兼容，也可能偶发该识别异常。

解决方法 #

• 确保你调用 <MagicRoom /> 的外层已经包裹了 @react-three/fiber 提供的 <Canvas> 组件，Canvas 会启用 Three.js 渲染器接管内部组件的解析逻辑，示例代码如下：

import { Canvas } from '@react-three/fiber'
import MagicRoom from './MagicRoom'

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Canvas>
        {/* 可按需添加灯光、相机配置等3D场景基础组件 */}
        <ambientLight intensity={0.5} />
        <directionalLight position={[10, 10, 5]} />
        <MagicRoom />
      </Canvas>
    </div>
  )
}

• 检查项目依赖，确认已安装 @react-three/fiber，且其版本和当前使用的 @react-three/drei 版本匹配，避免版本冲突。
• 你当前代码中将 Model 组件嵌套在 MagicRoom 内部定义，每次 MagicRoom 重渲染都会重新创建 Model 实例，会触发不必要的模型重加载，建议将 Model 组件提取到外部定义，修正后的代码如下：

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

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

const MagicRoom = () => {
  return (
    <Suspense fallback={null}>
      <Model />
    </Suspense>
  )
}

export default MagicRoom

内容的提问来源于stack exchange，提问作者raghav-wd