Why InstancedMesh is so distorted when loaded into scene?

Questions
1

Hello. I created a simple model in Blender. Now I need to add it to the scene as InstancedMesh. I did it actually and my code works fine with other models but in this particular case the model which I load to the scene is totally distorted. I export model as .glb from Blender - before I do this I apply all modifiers to the model and finally make a model one mesh (Ctrl+J). I also removed all assigned materials. My original model looks like this:

obraz
obraz769×518 43.9 KB

And after uploading to Three.js scene:

obraz
obraz1003×545 19.8 KB

I also attach Blender file and .glb file I used in my case.

Standard code where I’m instancing this model:

<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,
      light2: null,
      mesh: null,
      controls: null,
      width: 0,
      height: 0,
      stemMesh: null,
      blossomMesh: null,
      regalMesh: 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');

        const coordSystem = new THREE.AxesHelper(30)
        this.scene.add(coordSystem);

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

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

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

        // orbit controls
        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);

        let dummy = new THREE.Object3D();
        let amount = 1;

        // INSTANCING
        modelLoader.load(
            "regalFrontBottomNoMaterials.glb", (gltf) => {

		const _regalMesh = gltf.scene.getObjectByName('regalMesh');
		const regalGeometry = _regalMesh.geometry.clone();
		const regalMaterial = _regalMesh.material;
		this.regalMesh = new THREE.InstancedMesh( regalGeometry, regalMaterial, amount );

               for (let i = 0; i <= amount; i++) {
                  dummy.position.set(i, 1, 1);
                  dummy.updateMatrix();
		        this.regalMesh.setMatrixAt( i, dummy.matrix ); 
                }
	          this.regalMesh.instanceMatrix.needsUpdate = true;
		      this.regalMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );
                 this.scene.add(this.regalMesh);
            },
            // called while loading is progressing
            function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");          
            },
            // called when loading has errors
            function (error) {
            console.log(error);
            }
        );             

    },

    resizeCanvas() {

        this.width = this.$el.offsetWidth
        this.height = this.$el.offsetHeight
        // Update camera
        this.camera.aspect = this.width / this.height
        this.camera.updateProjectionMatrix()

        // Update renderer
        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>

I guess something is wrong with the model because code works fine with other models. However, I don’t know what’s wrong.
regalFrontBottomNoMaterials.blend (4.8 MB)
.
regalFrontBottomNoMaterials.glb (327.3 KB)