如何更改对象 A-Frame 的轴心点、变换原点或旋转点？答案

【问题标题】：How to change the pivot point, transform origin, or point of rotation for an object A-Frame?如何更改对象 A-Frame 的轴心点、变换原点或旋转点？
【发布时间】：2017-01-09 18:25:00
【问题描述】：

当我画一个<a-box>。本地化位于框的中心。旋转围绕盒子的中心旋转。如何更改旋转点？

<a-box rotation="0 45 0"></a-box>

【问题讨论】：

标签： aframe

【解决方案1】：

一种方法是将对象包装在父实体中，偏移内部实体的位置，然后对父实体应用变换。

下面的代码会将 Y 轴上的旋转点（或变换原点）移动 1 米。

<a-entity rotation="0 45 0">
  <a-box position="0 1 0"></a-box>
</a-entity>

这个枢轴组件也可以工作：

var originalPosition = new THREE.Vector3();
var originalRotation = new THREE.Vector3();

/**
 * Wrap el.object3D within an outer group. Apply pivot to el.object3D as position.
 */
AFRAME.registerComponent('pivot', {
  dependencies: ['position'],

  schema: {type: 'vec3'},

  init: function () {
    var data = this.data;
    var el = this.el;
    var originalParent = el.object3D.parent;
    var originalGroup = el.object3D;
    var outerGroup = new THREE.Group();

    originalPosition.copy(originalGroup.position);
    originalRotation.copy(originalGroup.rotation);

    // Detach current group from parent.
    originalParent.remove(originalGroup);
    outerGroup.add(originalGroup);

    // Set new group as the outer group.
    originalParent.add(outerGroup);

    // Set outer group as new object3D.
    el.object3D = outerGroup;

    // Apply pivot to original group.
    originalGroup.position.set(-1 * data.x, -1 * data.y, -1 * data.z);

    // Offset the pivot so that world position not affected.
    // And restore position onto outer group.
    outerGroup.position.set(data.x + originalPosition.x, data.y + originalPosition.y,
                            data.z + originalPosition.z);

    // Transfer rotation to outer group.
    outerGroup.rotation.copy(originalGroup.rotation);
    originalGroup.rotation.set(0, 0, 0);
  }
});

<a-entity pivot="0 1 0" rotation="0 45 0"></a-entity>

【讨论】：