Aframe如何在加载GLTF模型后重置默认比例

Question

我正在尝试制作一个应用程序，以 GLTF 格式添加来自 Google poly 的模型。

我遇到了一些模型在添加到场景中时非常大的问题，我通过使用边界框的最大值和最小值计算它们的大小并设置比例量来解决这个问题。

现在，当我打开检查器并拖动以缩放对象时，将对象添加到场景后，即使是少量的拖动，对象也会变得非常大。

如果有任何方法可以重置加载对象的缩放值，以便默认值可以是我计算的值，这也可以解决拖动缩放问题。

注意：对于 x、y、z，某些元素的计算比例因子为 0.00001。

Answer 1

使用 A-Frame 组件中的 three.js API 来计算模型的边界框，然后将其缩小到您喜欢的大小。示例：

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>

上面的代码将使您的模型适合约 2m 的盒子，并重新居中。如需更多信息，请参阅THREE.Object3D documentation。

three.js r89，A-Frame 0.8.0。