React-Three-Fiber中如何重复渲染同一份GLTF/GLB对象？

你遇到的问题核心原因是：useGLTF加载返回的scene是同一个Three.js对象实例，而Three.js不允许同一个对象同时被挂载到多个父节点下。每次你渲染新的ShowLK组件，都会把这个scene从之前的位置移除，挂载到新位置，最终只会显示最后一个实例。

下面提供两种可行的解决方案：

方案一：在子组件中克隆模型实例 #

直接修改ShowLK组件，每次渲染时克隆加载好的scene，确保每个组件拥有独立的模型对象：

import { useGLTF } from "@react-three/drei";

function ShowLK({x, y, z}) {
  const { scene } = useGLTF("LKGLB.glb");
  // 递归克隆场景及所有子对象、材质
  const clonedScene = scene.clone(true);
  return <primitive object={clonedScene} position={[x, y, z]} scale={[0.57, 0.57, 0.57]} />;
}

export default ShowLK;

这样修改后，每个ShowLK组件都会渲染独立的模型副本，不会互相覆盖。clone(true)参数确保递归克隆所有子元素和材质，保证模型的完整性。

方案二：父组件预生成克隆实例（性能更优） #

如果需要渲染大量实例（比如20个），可以在父组件中一次性完成模型克隆和位置计算，避免子组件重复克隆操作，提升性能：

修改ShowLK组件 #

// ShowLK.jsx
function ShowLK({ model, x, y, z }) {
  return <primitive object={model} position={[x, y, z]} scale={[0.57, 0.57, 0.57]} />;
}

export default ShowLK;

修改Boxes组件 #

// Boxes.jsx
import React, { useMemo } from 'react'
import ShowLK from "./ShowLK";
import { useGLTF } from "@react-three/drei";

const Boxes = () => {
  const { scene } = useGLTF("LKGLB.glb");
  
  // 预生成20个带位置的克隆实例，用useMemo缓存避免重复计算
  const modelInstances = useMemo(() => {
    return Array.from({ length: 20 }, (_, idx) => {
      const clonedModel = scene.clone(true);
      // 示例：按5列4行排列位置，可根据需求调整
      const x = (idx % 5) * 8 - 16;
      const z = Math.floor(idx / 5) * 8 + 60;
      return { model: clonedModel, x, y: 0, z };
    });
  }, [scene]);

  return (
    <>
      {modelInstances.map((item, idx) => (
        <ShowLK key={idx} {...item} />
      ))}
    </>
  )
}

export default Boxes

这个方案通过useMemo缓存所有克隆实例，仅在原始scene加载完成后生成一次，避免了重复克隆的开销，同时可以灵活控制20个模型的位置分布。

额外说明 #

• useGLTF默认会缓存加载的模型资源，所以无论调用多少次，只会从服务器加载一次GLB文件，不用担心资源重复加载的问题。
• 如果你的模型包含动画，克隆后需要额外处理动画控制器的克隆（比如使用AnimationMixer的克隆方法），不过如果只是静态模型，上述方案完全适用。

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