Kontinuierliche Animation einstellen

Question

Gibt es eine Möglichkeit, eine kontinuierliche Animation einzurichten? Beispiel: Basierend auf der Kameradrehung, drehen Sie die Kugel jedes Mal, wenn die Kamera gedreht wird.

Answer 1

-Komponente, die Kugel Kameradrehung und Updates mit tick kontinuierlich überprüft:

AFRAME.registerComponent('rotation-updater', { 
    tick: function() { 
    var sphere = this.el; 
    var camera = this.el.sceneEl.cameraEl; 

    var cameraRotation = camera.getAttribute('rotation'); 
    // var sphereRotation = DO SOMETHING WITH CAMERA ROTATION. 
    sphere.setAttribute('rotation', sphereRotation); 
    } 
}); 

Answer 2

Nun kann diese verwendet werden, wenn Animation endlich sein sollte:

AFRAME.registerComponent('camera-seeker', { 
    init() { 
     this.CAMERA = document.querySelector('#player'); 
     this.newCords = {}; 
     this.setupAnimation(); 
    }, 

    setupAnimation() { 
     let el = this.el; 
     var this_ = this; 
     seekAnim = new AFRAME.TWEEN.Tween(this.el.getAttribute('rotation')) 
      .to(this.newCords, 30000) 
      .easing(AFRAME.TWEEN.Easing.Quadratic.Out) 
      .onUpdate(function() { 
       el.setAttribute('rotation', `${this.x}, ${this.y}, ${this.z}`); 
      }) 
      .repeat(Infinity) 
      .start(); 
    }, 

    tick() { 
     if (!isGameStart()) return; 
     if (AFRAME.utils.coordinates.stringify(this.CAMERA.getAttribute('rotation')) !== AFRAME.utils.coordinates.stringify(this.el.getAttribute('rotation'))) { 
      Object.assign(this.newCords, this.CAMERA.getAttribute('rotation')); 
     } 
    } 
});