animations do not work - Githubissues

Utopiah commented 6 years ago

The most basic example works great on desktop, Safari... but somehow not on the XR Viewer. I checked the console (using VorlonJS) and no new error or warning.

<!DOCTYPE html>
<html>
  <head>
    <title>Animation on XR Viewer</title>
    <!-- aframe-xr with dependencies and utils -->
    <script src="https://rawgit.com/mozilla/aframe-xr/master/vendor/aframe-master.js"></script>
    <script src="https://rawgit.com/mozilla/aframe-xr/master/vendor/three.xr.js"></script>
    <script src="https://rawgit.com/mozilla/aframe-xr/master/dist/aframe-xr.js"></script>
  </head>
  <body>

    <a-scene hit-test>
        <a-sphere color="red" radius="0.1" position="5 0 -1">
                <a-animation attribute="radius" dur="1000" fill="forwards" to="0.0001" repeat="indefinite">
                </a-animation>
        </a-sphere>

    </a-scene>
  </body>
</html>

Same issue using the dedicated animation component. Is the tick handler behaving as expected?

Utopiah commented 6 years ago

To go a bit more in depth using my own setInterval function it works, but not relying on animation, the animation component of the tick handlers, cf :

<!DOCTYPE html>
<html>
  <head>
    <title>Animation on XR Viewer</title>
    <script src="http://fabien.benetou.fr:1337/vorlon.js"></script>
    <!-- aframe-xr with dependencies and utils -->
    <script src="https://rawgit.com/mozilla/aframe-xr/master/vendor/aframe-master.js"></script>
    <script src="https://rawgit.com/mozilla/aframe-xr/master/vendor/three.xr.js"></script>
    <script src="https://rawgit.com/mozilla/aframe-xr/master/dist/aframe-xr.js"></script>
  </head>
  <body>

<script>  
AFRAME.registerComponent('animationtestmanual', {
  init: function (){
    var el = this.el;
    setInterval( () => {
      var el = this.el;
      el.object3D.rotateY(Math.PI/10)
    }, 100 )
  }
});    

AFRAME.registerComponent('animationtest', {  
  tick: function () {
    var el = this.el;
    el.object3D.rotateY(Math.PI/10)
  }
});    

</script>    

    <a-scene hit-test>            
        <a-box color="blue" scale="0.1 0.1 0.1" position="1 0 -1" animationtestmanual></a-box>

        <a-box color="green" scale="0.1 0.1 0.1" position="3 0 -1" animationtest></a-box>

        <a-sphere color="red" radius="0.1" position="5 0 -1">
        <a-animation attribute="radius"
                     dur="1000"
                     fill="forwards"
                     to="0.0001"
                     repeat="indefinite"></a-animation>
        </a-sphere>

    </a-scene>
  </body>
</html>

where among the 3 options only the green element is animated.

vincentfretin commented 6 years ago

@Utopiah try my branch https://github.com/mozilla/aframe-xr/pull/18

blairmacintyre commented 6 years ago

@vincentfretin I totally "fell off the horse" in terms of pulling in your PRs. @Utopiah does #18 fix your issue? I was going to reply and say "I think this was related to the tick issue that we fixed recently" and then realized I hadn't pulled it in.

(I also need to pull in #19)

vincentfretin commented 6 years ago

Don't forget https://github.com/mozilla/three.xr.js/pull/11 too ;)

blairmacintyre commented 6 years ago

Just commented over there; I seem to have missed that. (sorry, the last month has been a ton of travel).

Utopiah commented 6 years ago

Indeed @blairmacintyre , @vincentfretin 's #18 does fix the problem.

blairmacintyre commented 6 years ago

Ok, I pull that PR into develop. I need to test this against our demos (xr-store, apainter) before doing a release, I think.

Utopiah commented 6 years ago

Right, I didn't notice any regression but I didn't also test in too much depth, only against the above page and also with a larger project using https://github.com/ngokevin/kframe/tree/master/components/animation/ , worked well in all cases.

mozilla / aframe-xr

animations do not work #21