3

Basically, I am developing a react app with react-three/fiber. I got a .glb file in public folder. In one component named "ShowLK.js" I use useGLTF as shown below. The problem is that I can only display ONE object in my Boxes Component (at any place on the app) when I want to be able to display the same object at least 20 times.

I got this:

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;

Then I got other Component element where I try to display it:

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

I tried searching for an afternoon trying to grasp the problem and find solution but didnt really solve it. I guess I need ID on each object when it clones?

I find gltfjsx but it said Requirements: Nodejs must be installed. Which I dont use.

SweDaniel
  • 41
  • 3

1 Answers1

2

You can use a Clone component from @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} />
    </>
  );
}
Maksym Shokin
  • 126
  • 2