Add the same object multiple times "GLTFLoader"

Questions
, ,
1

i want to add my 3d object “arrow.glb” multiple time in my scene but when i do, just one object apear.
Here is my code:

const gltf = useLoader(GLTFLoader, "/images/arrow.glb");

  return (
    <group>
      {positions.map((position, i) => (
        <sprite
          key={i}
          name={names[i]}
          position={[position[0], position[1], position[2]]}
          scale={new THREE.Vector3(8, 8, 8)}
          onClick={() => {
            onClick(i);
          }}
          onPointerEnter={() => setIsShown(true)}
          onPointerLeave={() => setIsShown(false)}
        >
          <primitive
            object={gltf.scene}
            scale={20}
            position={position}
            rotation={[Math.PI / 2, 0, 1]}
          />

          <Html>
            {isShown || windowSize < 1536 ? (
              <div className="text-blue-50 text-center w-52 -ml-[104px] -mr-[104px] -m-20 align-bottom drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,1)]">
                {names[i]}
              </div>
            ) : null}
          </Html>
        </sprite>
      ))}
    </group>
  );
2

Try refactoring to something like this structure.
i.e., create a single component that does everything you need really well, and then use it multiple times in the parent component.

import { OrbitControls, Environment } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'

const positions = [
  [-3, 0, 0],
  [0, 0, 0],
  [3, 0, 0]
]

function Model({ position }) {
  const { nodes, materials } = useGLTF('./models/monkey.glb')

  return (
    <group dispose={null}>
      <mesh geometry={nodes.Suzanne.geometry} material={materials.Gold} position={position} />
    </group>
  )
}

export default function App() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <Environment preset="sunset" />
      {positions.map((p, i) => (
        <Model key={i} position={p} />
      ))}
      <OrbitControls />
    </Canvas>
  )
}

image

1 Like