[Help] Loaded model placed very far away

[DidoMarchet]

Hi guys, I’ve got a question about scaling model after it was added into the scene.

In my scene the model is so far as you can see in the picture below:

Instead if I add it in something like GLTFViewer it is placed correctly:

My question is how to place the model with the correct scale into my stage.

Below how I init the camera and the render:

initCamera() {
    const aspect = this.canvas.offsetWidth / this.canvas.offsetHeight

    this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 1000)
    this.camera.position.z = 15
    this.camera.aspect = aspect
    this.camera.updateProjectionMatrix()
  }

render() {
    this.renderRequested = false
    if (resizeRenderer(this.renderer, this.parent)) {
      const canvas = this.renderer.domElement
      this.camera.aspect = canvas.clientWidth / canvas.clientHeight
      this.camera.updateProjectionMatrix()
    }
    this.camera.lookAt(this.scene.position)
    this.controls.update()
    this.renderer.render(this.scene, this.camera)
  }

Any techniques or advice are welcome,

thanks in advance and kind regards,

Davide

[ExoGeN]

You can use scale and z position of the camara like this:

this.camera.position.z = 15

and

theModel.scale.set(20, 20, 20);

Try to change and play with position.z and scale.set to find a perfect fit.

[vielzutun.ch]

@DidoMarchet

Any techniques or advice are welcome,

Before randomly scaling a model, I would like to know what’s going on.

If your model is displayed as “tiny”, then there are several possibilities:

• maybe it is tiny. ==> check its dimensions. Maybe on export a different than expected unit of measurement was applied.
• check the model’s position/translation with respect to the camera’s position. ==> maybe the camera is too far away in relation to size and position of the model.
• you could also apply a telelense effect by playing with the fov-parameter of THREE.PerspectiveCamera().
• Ultimately, you can of course scale your model.

[DidoMarchet]

Hi! Thanks!
Working with dimensions and position is the approach I have chosen.
Basically I set up the position and the camera in base to the model sizes in this way:

    const box = new THREE.Box3().setFromObject(model);
    const size = box.getSize(new THREE.Vector3()).length();
    const center = box.getCenter(new THREE.Vector3());

    this.controls.reset();

    model.position.x += (model.position.x - center.x);
    model.position.y += (model.position.y - center.y);
    model.position.z += (model.position.z - center.z);

    this.controls.maxDistance = size * 10;
    this.controls.minDistance = size;

    this.camera.near = size / 100;
    this.camera.far = size * 100;
    this.camera.updateProjectionMatrix();
    this.camera.position.copy(center);
    this.camera.lookAt(center);

I found this solution here:

Cannot set camera to glb, only geometry.center works

Hi there! I’m trying to move the camera to a glb file I can’t var helper = new THREE.BoxHelper(objectLoad.children[0]); helper.geometry.computeBoundingBox(); camera.position.z = helper.geometry.boundingBox.max.z + 100; camera.position.y = helper.geometry.boundingBox.max.y + 100; camera.position.x = helper.geometry.boundingBox.max.x + 100; scene.add(helper); .... theclass.camera.lookAt(helper.geometry.boundingBox.max); With that, and the object added to the scene will be enough to see it or no…

@ExoGeN and @vielzutun.ch thanks for your advices and for the fast replies, much appreciated.

Regards, Davide

[Belal_HMEDAN]

@ExoGeN

theModel.scale.set(20, 20, 20);

changing the scale .scale.set(0.05, 0.05, 0.05); has solved a similar issue of far away object with me, thanks.