aframe.js 如何修改形状pivot（锚点）位置至底部中心？

• 方案1：嵌套实体实现（最通用，无需修改几何体）
  原理是创建两层实体结构，外层父实体作为锚点载体，内层子实体放置实际渲染的形状，将子实体沿Y轴向上偏移自身高度的1/2，此时父实体的坐标原点就对应形状的底部中心。所有移动、缩放、旋转操作直接作用于父实体即可实现基于底部的变换。
  代码示例：

  <!-- 父实体：所有操作绑定在此，锚点为底部中心 -->
  <a-entity position="0 0 -5" scale="1 2 1">
    <!-- 子实体：实际形状，向上偏移自身高度的一半，示例中box高度为2，所以偏移y=1 -->
    <a-box position="0 1 0" color="red" width="1" height="2" depth="1"></a-box>
  </a-entity>
  

• 方案2：修改几何体原生锚点（无需嵌套实体）
  自定义组件直接修改几何体的顶点偏移，将形状的原点直接移到底部中心，后续所有变换直接作用于当前形状实体即可。
  自定义组件代码：

  AFRAME.registerComponent('pivot-bottom-center', {
    init: function () {
      const el = this.el;
      // 等待实体加载完成后计算几何尺寸
      el.addEventListener('loaded', () => {
        const mesh = el.getObject3D('mesh');
        // 计算形状的包围盒获取高度
        const boundingBox = new THREE.Box3().setFromObject(mesh);
        const shapeHeight = boundingBox.max.y - boundingBox.min.y;
        // 偏移几何体将原点设到底部中心
        mesh.geometry.translate(0, shapeHeight / 2, 0);
      });
    }
  });
  

  组件使用方式：

  <a-box pivot-bottom-center position="0 1 -5" scale="1 2 1" color="blue"></a-box>
  

两种方案可按需选择：仅临时调整锚点、后续需要恢复默认锚点的场景选方案1，无需修改几何体本身；需要固定底部锚点、希望简化DOM结构的场景选方案2。

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