peterqliu / threebox

A three.js plugin for Mapbox GL JS, with support for basic animation and advanced 3D rendering.
MIT License
528 stars 320 forks source link

Playing animation embedded on 3D file #96

Closed c4b4d4 closed 3 years ago

c4b4d4 commented 3 years ago

For some reason, I cannot get to play an animation embedded on a 3D file, I've found a hacky way to make it work, but an other bug appeared, I suppose cause this is not the way of doing it?

I'm trying to play the animation of a Collada File, as the Docs suggests I do it with any of the following lines:

obj.playDefault({duration:1000});

or

obj.playAnimation({animation:0,duration:1000});

The animation seems to get played, but for only a fraction or time, it stops automatically before reaching the 1000ms. I'm also looking to make it as an infinite animation.

Tried something like this, but the event doesn't even get fired:

obj.addEventListener("IsPlayingChanged", e => {
    if (!e.detail.isPlaying) {
      obj.playAnimation({ animation: 0, duration: 1000 });
    }
  },false);

So my solution to make it animate all the time was:

On the render function, added a condition to check if it was playing, and if not, make it play:

render: (gl, matrix) => {
    this.animateIcons();
    window["tb"].update();
  }

Where

animateIcons() {
    for (const key in this.animatedIcons) {
       if (!this.animatedIcons[key].isPlaying) {
            this.animatedIcons[key].playAnimation({ animation: 0, duration: 100 });
          }
    }
  }

This worked "great", I don't know how process eating is this solution, but when I add a second object to my map, it alls get funky, first object on the map becomes animated correctly no matter how many extra objects I add, but new ones are flickering and setting up in weird positions.

I'm attaching GIF of the behavior:

ezgif-2-5628fd9211af