I need help merging this JavaScript WebGL Earth animate (rotate) function into TypeScript for Angular

Question

Following these instructions I already have a WebGL Earth globe in an Angular component up and working. But writing this WebGL Earth animation (rotating) example animate function in to the typescript Angular component throws all sorts of errors. It's also important to include this start and stop at the same location into the animate (rotate) function.

So how to write this:

    var before = null;
    requestAnimationFrame(function animate(now) {
        var c = earth.getPosition();
        var elapsed = before? now - before: 0;
        before = now;
        earth.setCenter([c[0], c[1] + 0.1*(elapsed/30)]);
        requestAnimationFrame(animate);
    });

In to typescript.

The trickiest part I'm finding is this:

requestAnimationFrame(function animate(now) {

callback ? recursive function ? from JavaScript into TypeScript. But also the

var before = null;  

assignment.

I will post again with my next attempt/ update! Thanks!

Answer 1

OK, so I came up with something suspiciously simple that seems ok.

import { interval } from 'rxjs';
...

  earth:any;
  rotating: boolean = true;

  ngOnInit(): void {
    ...
    this.rotate();
  }

  pauseAnimation(){
    this.rotating = !this.rotating;
  }

  rotate() {
    const observable = interval(10);
    observable.subscribe( () => {
      if (this.rotating) {
        let c = this.earth.getPosition();
        this.earth.setCenter([c[0], c[1] + 0.1]);
      }
    });
  }

... = missing code.
The longitude coordinate just seems to loop round (-180 -- 180). I think the observable/ interval should be paused as well, but it seems fine for now. And Much simpler!

Answer 2

This would be the TypeScript equivalent.

let before: number | null = null;

function animate(now: number) {
  const c = earth.getPosition();
  const elapsed = before ? now - before : 0;
  before = now;
  earth.setCenter([c[0], c[1] + 0.1 * (elapsed / 30)]);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);