# Everytime rendering different 3D models in same code, it is rendering with different scales and position. how to fix this issue?

**URL:** <https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958>\
**Category:** Questions\
**Tags:** fbx, object3d, scale, webgl-renderer, gltf\
**Created:** [November 21, 2019, 11:44am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958 "2019-11-21T11:44:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thunder\_Bird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thunder_bird/32/7121_2.png) [@Thunder\_Bird](https://discourse.threejs.org/u/Thunder_Bird)\
**Post date:** [November 21, 2019, 11:44am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/1 "2019-11-21T11:44:28Z")

</div>

how to fix the scale of the 3D model of (.obj,fbx,gltf) format. every time i load different 3D models it has different scale size. sometimes one model renders with bigger scale and one different model in smaller scale. and sometimes its position also changes. how to fix this issue of loading 3D model of .obj,fbx,gltf format. and position issue??? i want to load different 3D models in same code…

```auto
   this.camera = new THREE.PerspectiveCamera(
            75, // fov = field of view
            this.width / this.height, // aspect ratio
            0.1, // near plane
            1000 // far plane
        );
        this.camera.position.set(0, 0, 0);
        this.camera.position.x = -150;

mtl.load( 'model.mtl', ( materials ) =>{
                        materials.preload();
				objl
				.setMaterials( materials )
				.load( 'model.obj', ( object )=> {
                                object.scale.x = 1;
                                object.scale.y = 1;
                                object.scale.z = 1; 
                               object.position.set(0,-125,0);
                                this.scene.add( object );

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 21, 2019, 12:08pm UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/2 "2019-11-21T12:08:52Z")

</div>

Hi!  
Something like that (from the scratch):

```auto
var desiredHeight = _someValue_; // the value you want to scale your models to

...

mtl.load( ‘model.mtl’, ( materials ) =>{
materials.preload();
  objl
  .setMaterials( materials )
  .load( ‘model.obj’, ( object )=> {

    var box = new THREE.Box3();
    box.setFromObject(object);

    var size = new THREE.Vector3();
    box.getSize(size);

    var center = new THREE.Vector3();
    box.getCenter(center);

    var scale = desiredHeight / size.y;
    object.scale.setScalar(scale);

    object.position.sub(center.multiplyScalar(scale));
  
    this.scene.add( object );
  }
}

```

---

<div class="post-metadata">

**Author:** ![Thunder\_Bird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thunder_bird/32/7121_2.png) [@Thunder\_Bird](https://discourse.threejs.org/u/Thunder_Bird)\
**Post date:** [November 25, 2019, 6:16am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/4 "2019-11-25T06:16:50Z")

</div>

hi, thanks for the reply. i tried the above code. the problem is every 3d model is not renedering the exact same size. it is not looking very small but few are rendering very large as compared to others. this is what i tried.

```
this.desired3DObjectScale=100;
var loader = new GLTFLoader();
var dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/draco/gltf/");
loader.setDRACOLoader( dracoLoader );
loader.load("/draco.gltf", gltf => {
  gltf.scene.traverse( function ( child ) {
    if ( child instanceof THREE.Mesh ) {
          child.geometry.computeFaceNormals();
          // child.geometry.computeVertexNormals();
          // child.material.shading = THREE.SmoothShading;
        }
    });
  const box = new THREE.Box3().setFromObject(gltf.scene);
  const size = new THREE.Vector3();
  box.getSize(size);
  var center = new THREE.Vector3();
  box.getCenter(center);
  var scale =this.desired3DObjectScale / size.y;
  gltf.scene.scale.setScalar(scale);
  gltf.scene.position.sub(center.multiplyScalar(scale));
  this.scene.add(gltf.scene);
});
```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 25, 2019, 6:46am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/5 "2019-11-25T06:46:34Z")

</div>

> [@Thunder\_Bird](#):
>
> but few are rendering very large

Any explanatory pictures with description what is correct and what is not?

---

<div class="post-metadata">

**Author:** ![DolphinIQ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dolphiniq/32/3510_2.png) [@DolphinIQ](https://discourse.threejs.org/u/DolphinIQ)\
**Post date:** [November 25, 2019, 7:02am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/6 "2019-11-25T07:02:56Z")

</div>

Models are loaded with the scale and position that the author applied to them. If you need them to be something else, then repositioning/rescaling them in the 3D software would be a simpler and probably more fitting solution

---

<div class="post-metadata">

**Author:** ![Thunder\_Bird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thunder_bird/32/7121_2.png) [@Thunder\_Bird](https://discourse.threejs.org/u/Thunder_Bird)\
**Post date:** [November 25, 2019, 7:07am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/7 "2019-11-25T07:07:32Z")

</div>

lighting effect i have not applied yet. here how it is looking ::  
this.desired3DObjectScale=60;

car::

 ![gltf1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/43f76e8887a37151e54d7e91df623265ec997837.png)

tree stump::

 ![gltf2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/51dea470753987fa5a798e65189077bd5731cc8a.png)

this is how tree stump should look. i have rendered it in three js Viewer::

 ![threeJs-gltf-viewer](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fdfdde968d00396af6dc8b4777fd411f84a406b7.png)

---

<div class="post-metadata">

**Author:** ![Thunder\_Bird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thunder_bird/32/7121_2.png) [@Thunder\_Bird](https://discourse.threejs.org/u/Thunder_Bird)\
**Post date:** [November 25, 2019, 7:09am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/8 "2019-11-25T07:09:04Z")

</div>

ooh! i need them to work without using any 3D softwares externally. any other options do we have using three js ?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 25, 2019, 7:18am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/9 "2019-11-25T07:18:54Z")

</div>

Then you have to count scale in 3 axes.  
Sort of this:

```auto
var desiredScale = _someValue_;
var scaleV3 = new THREE.Vector3().setScalar(desiredScale);
...
.load( ‘model.obj’, ( object )=> {

    var box = new THREE.Box3();
    box.setFromObject(object);

    var size = new THREE.Vector3();
    box.getSize(size);

    var center = new THREE.Vector3();
    box.getCenter(center);
   
    var scaleTemp = new THREE.Vector3().copy(scaleV3).divide(size);
    var scale = Math.min(scaleTemp.x, Math.min(scaleTemp.y, scaleTemp.z));
    object.scale.setScalar(scale);

    object.position.sub(center.multiplyScalar(scale));
  
    this.scene.add( object );
  }

```

---

<div class="post-metadata">

**Author:** ![Thunder\_Bird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thunder_bird/32/7121_2.png) [@Thunder\_Bird](https://discourse.threejs.org/u/Thunder_Bird)\
**Post date:** [November 25, 2019, 8:43am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/10 "2019-11-25T08:43:50Z")

</div>

> [@prisoner849](#):
>
> var scaleTemp = new THREE.Vector3().copy(scaleV3).divide(size); var scale = Math.min(scaleTemp.x, Math.min(scaleTemp.y, scaleTemp.z)); object.scale.setScalar(scale);

its working thanksss 😃

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 25, 2019, 8:52am UTC](https://discourse.threejs.org/t/everytime-rendering-different-3d-models-in-same-code-it-is-rendering-with-different-scales-and-position-how-to-fix-this-issue/10958/11 "2019-11-25T08:52:44Z")

</div>

You’re welcome 🙂 🍻