# How to use a glb model multiple times when using GLTFLoader?

**URL:** <https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040>\
**Category:** Questions\
**Tags:** glb, gltf-loader, loaders, materials, react-three-fiber, geometry\
**Created:** [July 11, 2024, 5:20pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040 "2024-07-11T17:20:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![iseafish69](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iseafish69/32/49550_2.png) [@iseafish69](https://discourse.threejs.org/u/iseafish69)\
**Post date:** [July 11, 2024, 5:20pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/1 "2024-07-11T17:20:12Z")

</div>

I am trying to understand how I can reuse models in ThreeJS / React Three Fiber

So let’s say I have a component Dude, where I load a model like so

```javascript
import model from "../../assets/dude.glb";

```

and use it like so

```javascript
const Dude = () => {
    const dudeRef = useRef();
    const groupRef = useRef();
    const gltf = useLoader(GLTFLoader, model);

    return (
        <group ref={groupRef} position={[0, 6, 0]}>
            <primitive
                ref={dudeRef}
                object={gltf.scene}
                scale={[1, 1, 1]}
            />
        </group>
    );

```

If I load that model in other components, it will use the model that is already loaded the first time

I can make duplicate files and that works, so I know the problem isn’t the model itself

I tried cloning the scene and using clone method from SkeletonUtils, but it did not work

Does anyone know what might my problem be? Ty ❤

---

<div class="post-metadata">

**Author:** ![iseafish69](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iseafish69/32/49550_2.png) [@iseafish69](https://discourse.threejs.org/u/iseafish69)\
**Post date:** [July 11, 2024, 5:31pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/2 "2024-07-11T17:31:15Z")

</div>

NVM I was using clone method from SkeletonUtils incorrectly 💀

This is what worked for

```javascript
import { clone } from 'three/examples/jsm/utils/SkeletonUtils';

const Dude = () => {
    const dudeRef = useRef();
    const groupRef = useRef();
    const gltf = useLoader(GLTFLoader, model);

    return (
        <group ref={groupRef} position={[0, 6, 0]}>
            <primitive
                ref={dudeRef}
                object={clone(gltf.scene)}
                scale={[1, 1, 1]}
            />
        </group>
    );

```

I was previously doing

```javascript
gltf.scene.clone()

```

Which did not work for me

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 12, 2024, 7:26am UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/3 "2024-07-12T07:26:31Z")

</div>

there is a misconception, both would be anti patterns.

your first example uses primitive, read this [Objects, properties and constructor arguments - React Three Fiber](https://docs.pmnd.rs/react-three-fiber/api/objects#putting-already-existing-objects-into-the-scene-graph)

> Scene objects can only ever be added once in Threejs. If you attempt to add one and the same object in two places Threejs will remove the first instance automatically. This will also happen with primitive! If you want to re-use an existing object, you must clone it first.

your second example does clone, but without usememo, so the whole model will be cloned when the component re-renders. btw skelleton clone is usually for skinned meshes.

```jsx
function Dude(props) {
  const { scene } = useGltf(model)
  const clone = useMemo(() => scene.clone(), [scene])
  return <primitive object={clone} {...props} />
}

<Dude position={[0, 6, 0]} scale={1} />
<Dude position={[6, 0, 0]} scale={2} />

```

there’s two better ways,

# 1. using drei/Gltf

```jsx
import { Gltf } from '@react-three/drei'

<Gltf src={model} position={[0, 6, 0]} scale={1} />
<Gltf src={model} position={[6, 0, 0]} scale={2} />

```

# 2. using gltfjsx

> **[GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components](https://github.com/pmndrs/gltfjsx)**
>
> 🎮 Turns GLTFs into JSX components

---

<div class="post-metadata">

**Author:** ![iseafish69](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iseafish69/32/49550_2.png) [@iseafish69](https://discourse.threejs.org/u/iseafish69)\
**Post date:** [July 12, 2024, 2:34pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/4 "2024-07-12T14:34:02Z")

</div>

Thank you for the hint ❤

Is there a big enough advantage to using gltfjsx as compated to Gltf from drei? Reading the description page the big advantage from it seems to be it’s ability to compress models?

---

<div class="post-metadata">

**Author:** ![iseafish69](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iseafish69/32/49550_2.png) [@iseafish69](https://discourse.threejs.org/u/iseafish69)\
**Post date:** [July 12, 2024, 3:45pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/5 "2024-07-12T15:45:13Z")

</div>

I tried using gltfjsx but the `Model` component it makes is not reusable for me for whatever reason

This is the command I used

```javascript
npx gltfjsx@6.2.18 src/assets/dude.glb --name DudeModel --transform --simplify 

```

And it made me a `Model` component (I thought the named would be DudeModel) as well as a `dude-transformed.glb`

I moved that new glb file into `src/assets/` and update path in `Model`

```javascript

import React, { useRef } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'
import model from "../../assets/dude-transformed.glb";

export function Model(props) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF(model)

```

And I tried using it just like it was suggested in the docs

```javascript
<Model key="model1" position={[10, 10, -60]}/>
<Model key="model2" position={[10, 10, -70]}/>

```

And it did not work, only let’s me place the 1 copy

Was there something I overlooked?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 12, 2024, 3:58pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/6 "2024-07-12T15:58:43Z")

</div>

the purpose of gltfjsx is declarative re-usability

example 1 [Re-using GLTFs - CodeSandbox](https://codesandbox.io/s/dix1y)  
example 2 (skinned meshes cannot be re-used in threejs without skelletontools) [https://codesandbox.io/p/sandbox/gltf-animations-re-used-k8phr](https://codesandbox.io/p/sandbox/gltf-animations-re-used-k8phr)?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 12, 2024, 4:03pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/7 "2024-07-12T16:03:21Z")

</div>

ps, i might have to make the skeletontools thing automatic, it’s too complex and hidden. i think the only place where it comes up is here [three.js docs](https://threejs.org/docs/index.html?q=skel#examples/en/utils/SkeletonUtils.clone)

---

<div class="post-metadata">

**Author:** ![iseafish69](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iseafish69/32/49550_2.png) [@iseafish69](https://discourse.threejs.org/u/iseafish69)\
**Post date:** [July 12, 2024, 4:25pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/8 "2024-07-12T16:25:50Z")

</div>

I see so even after using gltfjsx you have to adjust the Model component to make use of skeletontools, guess I’ll stick with using Gltf from drei per your first suggestion ty ty ❤

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 12, 2024, 4:37pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/9 "2024-07-12T16:37:33Z")

</div>

i’ll push a change in a few minutes, it’s already working locally. it will take care of it. \<Gltf uses skeletontools also but you’d use declarativity.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 12, 2024, 4:54pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/10 "2024-07-12T16:54:04Z")

</div>

Is [skinned instancing](https://threejs.org/examples/webgpu_skinning_instancing) an option here? Not r3f based but the source looks straight forward enough to port a workable component from…

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 13, 2024, 5:16pm UTC](https://discourse.threejs.org/t/how-to-use-a-glb-model-multiple-times-when-using-gltfloader/68040/11 "2024-07-13T17:16:08Z")

</div>

@iseafish69 it’s in

```shell
npx gltfjsx stacy.glb --transform

```

```jsx
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.4.0 stacy.glb --transform --console 
Files: stacy.glb [1.87MB] > /Users/ph/Downloads/651190fd-3842-46db-b089-e27b20818530/public/stacy-transformed.glb [822.97KB] (56%)
*/

import React from 'react'
import { useGraph } from '@react-three/fiber'
import { useGLTF, useAnimations } from '@react-three/drei'
import { SkeletonUtils } from 'three-stdlib'

export function Model(props) {
  const group = React.useRef()
  const { scene } = useGLTF('/stacy-transformed.glb')
  const clone = React.useMemo(() => SkeletonUtils.clone(scene), [scene])
  const { nodes, materials, animations } = useGraph(clone)
  const { actions } = useAnimations(animations, group)
  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Stacy" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <primitive object={nodes.mixamorigHips} />
        </group>
        <skinnedMesh name="stacy" geometry={nodes.stacy.geometry} material={nodes.stacy.material} skeleton={nodes.stacy.skeleton} />
      </group>
    </group>
  )
}

useGLTF.preload('/stacy-transformed.glb')

```