0

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!

user9284u5983u423u4o2u43
  • 1
  • 2

2 Answers2

0

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);
Hoisan Alex
  • 1
  • 1
  • Thanks, it still throws errors (the function keyword shouldn't be there? and It's still confusing with the callback? with no argument. But thank you. -- I've come up with something really simple. I'll post it – user9284u5983u423u4o2u43 Mar 16 '23 at 21:23
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 20 '23 at 22:04
0

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!

user9284u5983u423u4o2u43
  • 1
  • 2