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

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…

   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 );

Hi!
Something like that (from the scratch):

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 );
  }
}

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);
});

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

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

1 Like

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

car::

tree stump::

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

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

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

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 );
  }
2 Likes

its working thanksss :smiley:

You’re welcome :slight_smile: :beers:

1 Like