aframe.js 如何改变形状中心位置？（枢轴）

Question

https://glitch.com/edit/#!/copper-past-property?path=index.html%3A13%3A76

下方图片的轴心位置为中心

我想像下图一样将位置旋转到底部中心。

我更新示例。 https://glitch.com/edit/#!/copper-past-property?path=viewport.js%3A127%3A39

我想相对于底部移动形状并调整其大小，就像 3d 对象一样。

Answer 1

一般来说，添加偏移量/轴心的最简单方法是使用父子关系：

• 将您的对象插入任何父实体中
• 设置父对象的位置（加上枢轴位置）
• 将子节点移动到与枢轴位置相反的方向（所以pivot * -1）
• 对父实体执行任何操作

例如，0 0.5 -3 的框和 0 -0.5 0 的枢轴：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <!-- The sphere is the parent entity -->
  <a-sphere position="0 0 -3" radius="0.1" color="blue"
            animation="property: rotation; to: 360 0; loop: true; dur: 5000">
    <!--- The original, but now off-centered box --->
    <a-box position="0 0.5 0" material="wireframe:true; color: #aa00ff"></a-box>
  </a-sphere>
  <!--- axis --->
  <a-box position="0 0 -3" scale="5 0.05 0.05" color="red"></a-box>
</a-scene>

---

您的情况非常具体，因为您需要TransformControls 的支点。 一种方法是在它们附加的位置应用一个枢轴 (viewport.js)。

实体可以有一个定义枢轴点的组件：

AFRAME.registerComponent("editor-config", {
  schema: {
    offset: {type: "vec3", default: {x: 0, y: 0, z: 0}}
  },
  init: function() {
    // once the entity is loaded
    this.el.addEventListener("loaded", evt => {
      // save the offset within the THREE.Object3D
      const mesh = this.el.getObject3D("mesh")
      if (!mesh.userData) mesh.userData = {}
      mesh.userData.editoroffset = this.data.offset
    })
  }
});
// <a-box position="-1 0.5 -3" editor-config="offset: 0 -0.5 0"></a-box>

然后当 TransformControls 被附加时 - 你可以应用枢轴：

/*** setSelectEntity(entity) within viewport.js ***/

this.transformControls.attach(entity);
// reset the position
this.transformControls.position.multiplyScalar(0);
// if there is an offset to apply - use it
if (entity.userData && entity.userData.editoroffset)
  this.transformControls.position.copy(entity.userData.editoroffset)

查看this glitch