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 文档。

三.js r89，A-Frame 0.8.0。