使用useGLTF映射位置数组仅显示一个模型的问题求助

原因分析 #

useGLTF 默认会缓存加载的模型资源，所有 Dummy 组件实例共享同一个 scene 对象。而在Three.js中，同一个Object3D实例无法同时存在于场景的多个位置——当你多次将同一个scene挂载到不同位置时，它会被自动移动到最后一次挂载的位置，最终只显示一个模型。

而gltfjsx生成的组件会将模型拆解为独立的Mesh、Material等对象，每个组件实例都会创建全新的对象副本，因此可以正常渲染多个实例。

解决方案 #

在Dummy组件中对加载的scene进行深克隆，确保每个组件实例拥有独立的场景对象：

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

const Dummy = () => {
  const { scene } = useGLTF("/dummy.glb");
  // 深克隆场景（参数true表示递归克隆所有子对象与材质）
  const clonedScene = scene.clone(true);
  return <primitive object={clonedScene} />;
};

export { Dummy };

额外提示 #

如果你的模型包含动画，克隆后需要重新绑定动画控制器（AnimationMixer），可以在组件内初始化对应的mixer并播放动画：

import { useGLTF, useAnimation } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";

const Dummy = () => {
  const { scene, animations } = useGLTF("/dummy.glb");
  const clonedScene = scene.clone(true);
  const { actions, mixer } = useAnimation(clonedScene, animations);
  
  // 播放第一个动画（根据实际动画名称调整）
  actions[0]?.play();
  
  useFrame((state) => mixer.update(state.clock.getDelta()));
  
  return <primitive object={clonedScene} />;
};

export { Dummy };

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