React Three Fiber中如何克隆useGLTF加载的GLB模型节点？

核心逻辑：直接克隆Three.js对象 #

useGLTF返回的nodes本质是Three.js的各类对象实例（比如SkinnedMesh、Mesh），要复用单个节点，直接调用对象本身的.clone()方法即可，但需注意克隆参数设置和特殊节点（如蒙皮网格）的针对性处理。

1. 基础克隆操作 #

普通Mesh节点直接克隆即可，默认会共享geometry和material（无需复制，节省内存）：

const clonedMesh = nodes.someMesh.clone()

但SkinnedMesh（蒙皮网格）要额外注意骨架——骨架属于共享资源，克隆时不要复制，直接复用原节点的骨架即可，否则会导致动画异常。

2. 适配你代码的实际写法 #

把你的组件改成可复用版本，示例如下：

import { useGLTF } from '@react-three/drei'
import { useMemo } from 'react'

export function CharacterModel() {
  const { nodes } = useGLTF("/model.glb")

  // 克隆 outfit 蒙皮网格，用useMemo缓存避免重复克隆
  const clonedOutfit = useMemo(() => {
    // true表示递归克隆子节点，保证节点结构完整
    const mesh = nodes.outfit4.clone(true)
    // 手动绑定原骨架，克隆后可能丢失骨架引用
    mesh.skeleton = nodes.outfit4.skeleton
    return mesh
  }, [nodes])

  // 同理克隆 haircut 蒙皮网格
  const clonedHaircut = useMemo(() => {
    const mesh = nodes.haircut.clone(true)
    mesh.skeleton = nodes.haircut.skeleton
    return mesh
  }, [nodes])

  return (
    <group>
      {/* 根节点同样需要克隆 */}
      <primitive object={nodes.RootNode.clone(true)} />
      {/* 用primitive渲染克隆后的节点 */}
      <primitive object={clonedOutfit} />
      <primitive object={clonedHaircut} />
    </group>
  )
}

3. 关键注意事项 #

• 用useMemo缓存克隆结果：避免每次渲染都重新克隆，防止性能损耗。
• 蒙皮网格的骨架不要复制：所有实例共用同一个骨架即可，复制骨架只会浪费内存并导致动画异常。
• 独立修改材质的处理：如果需要给单个实例单独调整材质，手动克隆材质即可：mesh.material = nodes.outfit4.material.clone()，否则修改一个实例的材质会影响所有共用该材质的实例。
• 克隆参数选择：.clone(true)表示递归克隆子节点，若节点没有子节点，传false也可。

4. 组件复用方式 #

现在直接在父组件中多次调用该组件即可，每个实例都是独立的克隆体：

export function Scene() {
  return (
    <Canvas>
      <CharacterModel position={[-2, 0, 0]} />
      <CharacterModel position={[2, 0, 0]} />
    </Canvas>
  )
}

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