AFrame加载模型的自动缩放与自动居中问题

Hey there，我太懂你这会儿的头疼了——从Google Poly拉来的模型要么大到占满整个iframe，要么小到看不见，之前用的社区方案本来好好的，结果一手动调缩放或旋转就出问题。别慌，咱们来把这个autoscale组件改得更靠谱，既能自动适配合理尺寸，又能完美兼容手动调整操作。

先说说问题的核心：之前的方案大概率是初始化时硬套了一次缩放，但没考虑后续手动修改变换属性时的冲突，也没正确基于模型的真实边界来计算缩放比例。下面是修复后的完整组件代码：

AFRAME.registerComponent('autoscale', {
  schema: {
    type: 'number',
    default: 1  // 可自定义的基准缩放系数，按需调整
  },
  init: function () {
    const el = this.el;
    // 必须等模型完全加载再计算尺寸，不然拿不到模型的mesh对象
    el.addEventListener('model-loaded', () => {
      const mesh = el.getObject3D('mesh');
      if (!mesh) return;

      // 计算模型的真实边界盒，拿到三维尺寸
      const boundingBox = new THREE.Box3().setFromObject(mesh);
      const modelSize = boundingBox.getSize(new THREE.Vector3());
      // 取模型最大的维度作为缩放参考，保证模型能适配场景
      const maxDimension = Math.max(modelSize.x, modelSize.y, modelSize.z);
      // 计算目标缩放值，基准系数由schema传入，可灵活调整
      const targetScale = this.data / maxDimension;

      // 先把当前的旋转、位置存下来，避免缩放时覆盖原有设置
      const currentRotation = el.getAttribute('rotation');
      const currentPosition = el.getAttribute('position');

      // 应用自动缩放，同时还原之前的旋转和位置
      el.setAttribute('scale', {
        x: targetScale,
        y: targetScale,
        z: targetScale
      });
      el.setAttribute('rotation', currentRotation);
      el.setAttribute('position', currentPosition);

      // 监听手动调整事件，一旦用户改了缩放/旋转，就停止自动缩放的干扰
      this.handleManualEdit = () => {
        el.removeEventListener('componentchanged', this.handleManualEdit);
        this.hasManualAdjustment = true;
      };
      el.addEventListener('componentchanged', (evt) => {
        if (!this.hasManualAdjustment && (evt.detail.name === 'scale' || evt.detail.name === 'rotation')) {
          this.handleManualEdit();
        }
      });
    });
  }
});

这里有几个关键细节要划重点：

• 等待模型加载：用model-loaded事件确保模型资源加载完成后再计算尺寸，不然会出现拿不到mesh的情况，导致缩放失效。
• 基于真实边界计算：通过THREE.Box3获取模型的实际大小，取最大维度来计算缩放比例，不管模型是细长型还是矮胖型，都能保证它在场景里显示得合理。
• 保留原有变换：缩放前先保存当前的旋转和位置，避免自动缩放把用户之前设置的位置、旋转给冲掉。
• 兼容手动调整：监听componentchanged事件，一旦用户手动修改了缩放或旋转，就立刻停止自动缩放的逻辑，防止两者互相干扰。

最后给个使用示例，直接把组件加到你的模型实体上就行：

<a-entity gltf-model="#your-poly-model" autoscale="2.5" position="0 1.6 0"></a-entity>

这里的2.5是基准缩放系数，你可以根据iframe场景的大小自己调整，数值越大模型显示得越大。

内容的提问来源于stack exchange，提问作者sidd