如何渲染同一三维模型的多个三维

Question

我有一个来自Mixamo的3D模型，并使用npx-gltfjsx将其制作成一个组件。现在我想多次渲染这个模型，但当我尝试这样做时，我在Canvas上只得到一个模型。

有办法做到这一点吗？这是我的文件：

const { actions } = useAnimations(animations, heroRef);
return (
<>
<group ref={heroRef} dispose={null}>
<group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
<primitive object={nodes.mixamorig1Hips} />
<skinnedMesh
geometry={nodes.Ch36.geometry}
material={materials.Ch36_Body}
skeleton={nodes.Ch36.skeleton}
/>
</group>
{/* <gridHelper args={[25, 25]}/> */}
</group>
</>
);
}
useGLTF.preload("/Mannequin.glb"); ```
Any help/advice is appreciated.

Answer 1

需要克隆模型，如下所示：

const scene = React.useMemo(() => {
return model.scene.clone();
}, [model]);

上面克隆了scene，但您可以对useGLTF返回的对象内的nodes、materials等执行相同操作

这里有一个例子：

https://codesandbox.io/s/heuristic-clarke-g58yp?file=/src/App.js