# The problem of GLTFLoader with InstancedMesh

**URL:** <https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [November 12, 2022, 7:40am UTC](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609 "2022-11-12T07:40:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jacob/32/31009_2.png) [@jacob](https://discourse.threejs.org/u/jacob)\
**Post date:** [November 12, 2022, 7:40am UTC](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609/1 "2022-11-12T07:40:32Z")

</div>

I want to use instancedMesh() to load a GLB model, but many meshes and materials are under the GLB model.  
Each mesh and material must be loaded.  
Want to ask if there is a way to turn each mesh into an instancedMesh object to efficiently manage the position of each count?

---

<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:** [November 12, 2022, 9:26am UTC](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609/2 "2022-11-12T09:26:33Z")

</div>

Have you had a look at the official example for this [here](https://threejs.org/examples/?q=Instan#webgl_loader_gltf_instancing) I’ve not inspected the model to check if its multiple parts or multi material but essentially you can merge geometries on all parts that share the same matetial…

---

<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:** [November 12, 2022, 9:46am UTC](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609/3 "2022-11-12T09:46:03Z")

</div>

i don’t think there’s anything. models rarely share the same material, practically nothing on sketchfab does. it’s always a bunch of geometries and materials, no texture atlas is shared between them. you may be able to merge geometries, but it will limit what you can later do with the model.

the only place where it exists is the react + three eco system. see

> <https://twitter.com/0xca0a/status/1552372534397501446>

there’s a tool called [gltfjsx](https://github.com/pmndrs/gltfjsx#%EF%B8%8F-auto-instancing) that uses gltf-transform to dedupe the geometries, all similar geometries now refer to a single geometry. it then traverses everything to find geometry+ material pairs and builds an index of instanceable meshes and drops it into [drei/Merged](https://github.com/pmndrs/drei#merged).

here’s a live example [GLTF auto instances - CodeSandbox](https://codesandbox.io/s/02rcbq?file=/src/App.js:242-246)

---

<div class="post-metadata">

**Author:** ![jacob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jacob/32/31009_2.png) [@jacob](https://discourse.threejs.org/u/jacob)\
**Post date:** [November 16, 2022, 1:49am UTC](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609/4 "2022-11-16T01:49:28Z")

</div>

> [@drcmda](#):
>
> gltf-transform

Would like to ask if gltf-transform has a similar sample code?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [November 16, 2022, 2:16am UTC](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609/5 "2022-11-16T02:16:03Z")

</div>

If you have a GLB model that contains many repetitions of the same mesh(es) then glTF Transform can detect that, consolidate any redundant data, and (optionally) add the `EXT_mesh_gpu_instancing` extension causing GLTFLoader to create THREE.InstancedMesh objects. Typical usage in the CLI would look something like this:

```nohighlight
# install
npm install --global @gltf-transform/cli

# help
gltf-transform --help

# deduplicate and instance
gltf-transform dedup in.glb out.glb
gltf-transform instance out.glb out.glb

```

Or there’s a Node.js or Web-friendly scripting API for this too.

If you just have a GLB containing one example of the thing you want to repeat throughout the scene, though, that’s probably out of glTF-Transform’s wheelhouse. R3F is good for that, for vanilla three.js you’d have to deconstruct the scene a bit and I don’t know of general-purpose examples for that.

---

<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:** [November 16, 2022, 11:41am UTC](https://discourse.threejs.org/t/the-problem-of-gltfloader-with-instancedmesh/44609/6 "2022-11-16T11:41:21Z")

</div>

I put [this](https://3dpk.co.uk/iPhone/) example together, not sure if it helps but essentially it pushes all parts of the gltf to an array and creates an instance mesh for each part, setting the positions from a fixed array of vector3’s, not sure this is the most performant way but the only way I could see possible, updating the positions is also a bit tricky but works if the positions don’t need dynamically updating…