# How can I get InstancedMesh working properly with .glb?

**URL:** <https://discourse.threejs.org/t/how-can-i-get-instancedmesh-working-properly-with-glb/40623>\
**Category:** Questions\
**Tags:** instanced-mesh\
**Created:** [July 22, 2022, 8:58am UTC](https://discourse.threejs.org/t/how-can-i-get-instancedmesh-working-properly-with-glb/40623 "2022-07-22T08:58:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kamil](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kamil/32/28219_2.png) [@Kamil](https://discourse.threejs.org/u/Kamil)\
**Post date:** [July 22, 2022, 8:58am UTC](https://discourse.threejs.org/t/how-can-i-get-instancedmesh-working-properly-with-glb/40623/1 "2022-07-22T08:58:09Z")

</div>

I imported .glb file to my app, now I want to make copies of it using `InstancedMesh`. I followed this official example (I even used the same `Flower.glb` model): [three.js/webgl\_instancing\_scatter.html at 191a1ef699a5d53de2cd645c667e7fee184a18fd · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/blob/191a1ef699a5d53de2cd645c667e7fee184a18fd/examples/webgl_instancing_scatter.html). I simplified my example, don’t need to to transform geometries, just need to make copies. I have no errors in the console so seems it works fine but the issue is that nothing shows up in the scene. I have no idea why, all the more that my example follows official Three.js example. What’s the issue?

```javascript
<template>
  <div id="viewport" ref="container"></div>
</template>

<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default {
  name: 'Scene',

  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      light: null,
      mesh: null,
      controls: null,
      width: 0,
      height: 0,
      stemMesh: null,
      blossomMesh: null
    }
  },

  methods: {
    init() {

        this.width = this.$el.offsetWidth
        this.height = this.$el.offsetHeight

        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color('#272727');

        this.camera = new THREE.PerspectiveCamera(70, this.width / this.height, 0.01, 100);
        this.camera.position.set(0,10,10);

        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(this.width, this.height);
        this.$refs.container.appendChild(this.renderer.domElement);

        this.light = new THREE.DirectionalLight(0xffffff,2);
        this.light.position.set(1,1,1);
        this.scene.add(this.light);

        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.update();

        // DRACOLoader
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('dracoDecoder/');

        // GLTFLoader
        const modelLoader = new GLTFLoader();
        modelLoader.setDRACOLoader(dracoLoader);

        // loading .glb model and make copies using InstancedMesh
        modelLoader.load(
            "Flower.glb", (gltf) => {

                const _stemMesh = gltf.scene.getObjectByName('Stem');
                const _blossomMesh = gltf.scene.getObjectByName('Blossom');

                const stemGeometry = _stemMesh.geometry.clone();
                const blossomGeometry = _blossomMesh.geometry.clone();

                const stemMaterial = _stemMesh.material;
                const blossomMaterial = _blossomMesh.material;

                this.stemMesh = new THREE.InstancedMesh( stemGeometry, stemMaterial, 20 );
                this.blossomMesh = new THREE.InstancedMesh( blossomGeometry, blossomMaterial, 20 );

                this.stemMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );
                this.blossomMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );

                this.scene.add(this.stemMesh);
                this.scene.add(this.blossomMesh);

                console.log(this.stemMesh)
            },

                function (xhr) {
                console.log((xhr.loaded / xhr.total) * 100 + "% loaded");      
            },

                function (error) {
                console.log(error);
            }
        );             

    },

    resizeCanvas() {

        this.width = this.$el.offsetWidth
        this.height = this.$el.offsetHeight

        this.camera.aspect = this.width / this.height
        this.camera.updateProjectionMatrix()

        this.renderer.setSize(this.width, this.height)
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    },

    animate() {
        requestAnimationFrame(this.animate);
        this.controls.update();
        this.renderer.render(this.scene, this.camera);
    }

  },

    mounted() {
        this.init();
        this.animate();

        window.addEventListener('resize', () => {
        this.resizeCanvas();
      });
  }

}
</script>

```

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [July 22, 2022, 9:30am UTC](https://discourse.threejs.org/t/how-can-i-get-instancedmesh-working-properly-with-glb/40623/2 "2022-07-22T09:30:30Z")

</div>

Where do you set your `new THREE.Matrix4()`?  
This part is missing (line 88 in the demo) you still need them, even if you keep all instances at the same position.

---

<div class="post-metadata">

**Author:** ![Kamil](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kamil/32/28219_2.png) [@Kamil](https://discourse.threejs.org/u/Kamil)\
**Post date:** [July 22, 2022, 9:42am UTC](https://discourse.threejs.org/t/how-can-i-get-instancedmesh-working-properly-with-glb/40623/3 "2022-07-22T09:42:11Z")

</div>

I didn’t do that because I don’t want to make any transformations on my objects like resizing etc. That’s why I purposely removed this part of the code. However, I see it’s needed for some reason.

Why do I need to transform geometries? I don’t get it.

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [July 22, 2022, 9:55am UTC](https://discourse.threejs.org/t/how-can-i-get-instancedmesh-working-properly-with-glb/40623/4 "2022-07-22T09:55:40Z")

</div>

It’s like factory default values 😉, it’s required by internal functions.  
Sometimes `new THREE.` define multiples values at 0 under the hood for you

But some other times Three internal function expect you to provide your own zero/default values, they don’t check this for you.

---

<div class="post-metadata">

**Author:** ![Kamil](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kamil/32/28219_2.png) [@Kamil](https://discourse.threejs.org/u/Kamil)\
**Post date:** [July 22, 2022, 10:05am UTC](https://discourse.threejs.org/t/how-can-i-get-instancedmesh-working-properly-with-glb/40623/5 "2022-07-22T10:05:51Z")

</div>

Ok, so it’s something what happens under the hood to make instancing working. Thank you, I’ll take a look into it and try to modify my code.