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

Question

基本上，我正在开发一个带有 react-three/fiber 的 React 应用程序。 我在公用文件夹中有一个 .glb 文件。 在一个名为“ShowLK.js”的组件中，我使用 useGLTF，如下所示。 问题是当我希望能够至少显示同一个对象 20 次时，我只能在我的 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;

然后我得到了其他 Component 元素，我尝试在其中显示它：

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，但它说 Requirements: Nodejs must be installed。 我不使用哪个。

Answer 1

您可以使用来自@react-three/drei 的克隆组件。

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} />
    </>
  );
}