在React中，如何克隆GLTF/glb对象？

Question

基本上，我正在使用react-three/fiber开发react应用程序。我在public文件夹中得到了一个.glb文件。在名为“ShowLK.js”的一个组件中，我使用如下所示的useGLTF。问题是，当我想要在应用程序中的任何地方显示相同的对象时，我只能在我的Boxes组件中显示一个对象。

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

function ShowLK({x, y, z}) {
  const { scene } = useGLTF("LKGLB.glb");
  return <primitive object={scene} position={[x, y, z]} scale={[0.57, 0.57, 0.57]} />;
}

export default ShowLK;

然后我得到了另一个组件元素，我尝试将其显示出来：

import React from 'react'
import ShowLK from "./ShowLK";


const Boxes = () => {
  return (
<>
    <ShowLK 
    x={9}
    y={0}
    z={81}
      />
    <ShowLK 
    x={-9}
    y={0}
    z={81}
      />

</>
  )
}

export default Boxes

我花了一个下午的时间搜索并尝试理解问题，寻找解决方案，但并没有真正解决它。我猜每个克隆对象都需要一个ID？

我发现gltfjsx，但它说要求安装Nodejs。而我并没有使用它。

- SweDaniel

---

只需使用.clone()方法复制您想要复制的任何对象： https://threejs.org/docs/#api/en/core/Object3D.clone - M -

请问这个具体的例子中如何应用它？ - SweDaniel

所以我使用了chatGTP... const duplicatedScene = scene.clone(); 然后返回 <primitive object={duplicatedScene} position={[x, y, z]} scale={[0.57, 0.57, 0.57]} />; - SweDaniel

Answer 1

你可以使用 @react-three/drei 中的 Clone 组件。

import { Clone, useGLTF } from '@react-three/drei';

export const Model = () => {
  const model = useGLTF('LKGLB.glb');

  return (
    <>
      <Clone object={model.scene} scale={0.35} position-x={-4} />
      <Clone object={model.scene} scale={0.35} position-x={0} />
      <Clone object={model.scene} scale={0.35} position-x={4} />
    </>
  );
}

- Maksym Shokin

---

当您想要使用节点而不是场景时，如何实现？ - Suisse