如何渲染同一 3D 模型的多个 3D；答案

【问题标题】：How To Render Multiple 3D of Same 3D Model;如何渲染同一 3D 模型的多个 3D；
【发布时间】：2022-01-26 16:28:48
【问题描述】：

我有一个来自 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.

【问题讨论】：

标签： javascript reactjs three.js 3d react-three-fiber

【解决方案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

【讨论】：