在反應中，如何克隆 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} />
    </>
  );
}