Wie ändere ich den Drehpunkt, transformiere Ursprung oder Drehpunkt für ein Objekt A-Frame?

Question

Wenn ich eine <a-box> zeichnen. Die Lokalisierung ist in der Mitte der Box. Die Rotation dreht sich um die Mitte der Box. Wie ändere ich den Drehpunkt?

Answer 1

Eine Möglichkeit besteht darin, das Objekt in eine übergeordnete Entität zu verschieben, die Position der inneren Entität zu versetzen und dann Transformationen auf die übergeordnete Entität anzuwenden.

Der folgende Code verschiebt den Drehpunkt (oder den Ursprung der Transformation) auf der Y-Achse um 1 Meter.

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

Diese Gelenkkomponente kann auch arbeiten:

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>