オブジェクトAフレームのピボットポイント、変換原点、または回転点を変更するにはどうすればよいですか？

Question

私は<a-box>を描画します。ローカリゼーションはボックスの中心にあります。回転はボックスの中心を中心に回転します。ローテーションポイントを変更するにはどうすればよいですか？

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

Answer 1

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>