CODEWITHSUNDEEP
javascriptaframe
Appeiron
Appeiron

Reputation: 1063

Set continuous animation

Is there way to setup continuous animation? Example: based on camera rotation, rotate sphere around it each time camera rotated.

Upvotes: 1

Views: 122

Answers (2)

Appeiron
Appeiron

Reputation: 1063

Well, this can be used when animation should be finite:

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'));
        }
    }
});

Upvotes: 0

ngokevin
ngokevin

Reputation: 13233

Component that continuously checks camera rotation and updates sphere using tick:

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);
  }
});

Upvotes: 2

Related Questions