React Three Fiber低多边形模型

在React Three Fiber中加载GLB的标准方式是drei的useGLTF Hook，它包装了Three.js自己的GLTFLoader，但加上了按URL自动缓存的功能，因此在同一场景的五个不同组件里调用useGLTF('/model.glb')，文件只会被加载和解析一次，而非五次，这对反复使用同一个低多边形岩石或木桶网格的场景意义重大。由于加载是异步的，useGLTF必须在被React的Suspense包裹的组件内调用，并配一个回退内容（常见的是drei的Html加载器或一个简单的占位网格）在GLB流式加载期间显示，这是新手最常遇到的设置错误：在Suspense之外调用useGLTF会直接抛出异常，而不是静默等待。

gltfjsx命令行工具在开发阶段运行一次（而非运行时），把GLB转换成一个现成的JSX组件文件，生成明确的<mesh>和<group>节点，几何体和材质引用已经接好线，从Blender保留下来的节点名称也一并保留，需要时甚至能生成TypeScript类型。对于任何层级不止简单一层的低多边形模型，这是推荐的生产环境路径，因为生成的组件让你能直接通过JSX访问各个具名部件——宝箱独立铰接的盒盖、骑士的各件盔甲——用于逐部件的动画或交互，而不必在运行时通过基于字符串的节点查找去翻找原始的useGLTF场景图。

实例化重复的低多边形道具——正是本站岩石、树木和木桶所依赖的模式——有一个专门的drei辅助组件：<Instances>和<Instance>通过底层的一个THREE.InstancedMesh来渲染同一几何体和材质的多个副本，这比从同一个GLB挂载五十个独立的<mesh>组件廉价得多。drei更简单的<Clone>组件复用一个已加载模型的几何体和材质引用，但没有实例化那种绘制调用节省，适合少量带独立逐实例状态的重复对象；一旦场景需要几十上百个同样的低多边形岩石或植被丛，Instances才是正确选择。

由于这里的低多边形模型本身就自带烘焙好的纯色或渐变材质，而非完整的PBR贴图组，大多数React Three Fiber场景只需要一个ambientLight加一个directionalLight，或drei的<Environment>预设提供柔和的环境补光，而不需要复杂的灯光装置；用多盏写实灯光给平面着色的低多边形素材过度打光，往往会冲淡这种风格赖以清晰可读的多面质感。动画混合（角色的绑定行走循环、宝箱盒盖开启）请通过drei的useAnimations Hook，它包装了Three.js的AnimationMixer，并把具名片段直接暴露为对React友好的action。

低多边形素材与React Three Fiber天然搭配，适用于交互式产品页面、作品集3D展示、用现代网页技术栈搭建的配置器体验，以及想要React组件模型而非传统游戏引擎编辑器的游戏原型。这里生成的一切都归你商用所有，无需署名，因此一个通过useGLTF加载、用gltfjsx转换，或通过drei实例化的GLB，都可以发行进商业React应用，无需任何额外的授权步骤。