three.js加载GLTF模型报错：FirstBracelet不在THREE命名空间

报错原因 #

你遇到的Uncaught Error: R3F: FirstBracelet is not part of the THREE namespace!错误，核心原因是违反了React组件命名规范：React要求自定义组件必须以大写字母开头，你当前的组件firstBracelet是小写开头，在JSX中会被识别为原生HTML标签，而非你定义的自定义组件，导致R3F误判它属于THREE命名空间范畴。

修复步骤 #

1. 修改组件命名为大写开头 #

编辑FirstBracelet.jsx，将导出的函数名改为大写：

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

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

// 改为大写开头的FirstBracelet
export function FirstBracelet(props) {
  const { nodes, materials } = useGLTF('./models/firstBracelet.gltf')
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.Diamond.geometry} material={materials['Material #31']} position={[-4.208, -0.481, -2.67]} rotation={[1.654, -0.025, -1.124]} scale={22.256} />
      <mesh geometry={nodes.Gold.geometry} material={materials['Material #25']} position={[-4.208, -0.481, -2.67]} rotation={[1.654, -0.025, -1.124]} scale={22.256} />
      <mesh geometry={nodes.LOGO.geometry} material={materials['Material #34']} position={[-6.861, 0.128, 6.297]} rotation={[-2.154, -0.174, -2.156]} scale={0.15} />
    </group>
  )
}

useGLTF.preload('./models/firstBracelet.gltf')

2. 在Experience.jsx中正确导入并使用组件 #

更新导入语句和JSX中的组件调用，统一使用大写名称：

import { OrbitControls, Stage } from "@react-three/drei";
// 导入大写的FirstBracelet
import { FirstBracelet } from "./FirstBracelet";

export const Experience = () => {
  return (
    <>
      <Stage
        intensity={1.5}
        environment="city"
        shadows={{
          type: "accumulative",
          color: "#d9afd9",
          colorBlend: 2,
          opacity: 2,
        }}
        adjustCamera={0.9}
      >
        {/* 使用大写的组件标签 */}
        <FirstBracelet />
      </Stage>
      <OrbitControls
        makeDefault
        minPolarAngle={0}
        maxPolarAngle={Math.PI / 2}
      />
    </>
  );
};

3. 移除不必要的extend调用 #

你之前添加的extend({firstBracelet})完全多余，extend仅用于扩展THREE.js的原生类（比如自定义材质、几何体），你的FirstBracelet是普通React组件，直接删除这行代码即可。

完成以上修改后，组件就能被React正确识别，3D模型应该可以正常渲染。

内容的提问来源于stack exchange，提问作者MozzyMan