Aframe how to reset default scale after loading the GLTF model

Question

I am trying to make an app which adds models from google poly in GLTF format.

I had the issue of some models being extremely large when added on the scene which I solved by computing their size with bounding box max and min values and setting the scale amount.

Now after adding the objects to the scene when I open the inspector and drag to scale objects, even with a small amount of drag the objects becomes very large.

If there is any way to reset the scale value of loaded objects so that default value can be the value which I computed and this can also solve the drag to scale issue.

Note: The computed scale factor for some elements goes to 0.00001 for x, y, z.

Any inputs will be appreciated.

-Thanks

Answer 1

Use the three.js API within A-Frame components to compute a bounding box of the model, then scale it down to the size you prefer. Example:

AFRAME.registerComponent('autoscale', {
  schema: {type: 'number', default: 1},
  init: function () {
    this.scale();
    this.el.addEventListener('object3dset', () => this.scale());
  },
  scale: function () {
    const el = this.el;
    const span = this.data;
    const mesh = el.getObject3D('mesh');

    if (!mesh) return;

    // Compute bounds.
    const bbox = new THREE.Box3().setFromObject(mesh);

    // Normalize scale.
    const scale = span / bbox.getSize().length();
    mesh.scale.set(scale, scale, scale);

    // Recenter.
    const offset = bbox.getCenter().multiplyScalar(scale);
    mesh.position.sub(offset);
  }
});

HTML:

<a-entity autoscale="2" gltf-model="stereo.gltf"></a-entity>

The code above will fit your model to a ~2m box, and re-center it. For more information see THREE.Object3D documentation.

three.js r89, A-Frame 0.8.0.