Ar.js: Animating in AFrame using AR.js

Created on 1 May 2019 · 4Comments · Source: jeromeetienne/AR.js

Describe the bug
I am not sure if this is a bug but rather a limitation of using A-Frame with AR.js. I am trying to animate the Cube rotating using a-animation attributes.

To Reproduce
Steps to reproduce the behavior:

Go to on Laptop 'https://codepen.io/ArifQazi/pen/KYjWVL'
Load Hiro Marker on Phone 'https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg'
See Cube on screen
But the Cube does not rotate

Expected behavior
I am expecting the Cube to Rotate and animate. Is this is a limitation? I see that some of the other AR.js examples use Three.js to Animate but have not found a working A-Frame animation with Ar.js.

MacOS high Sierra version 10.13.6
- iphone XR - iOs 12.2 Safari

Additional context
I am starting a project for class. Just wanted to see if there are any limitations to using A-Frame with AR.js as opposed to AR.js with Three.js.

Thank you for your help.

Source

arifqz

👍1

Most helpful comment

No time to debug your project right now unfortunately, but I have animated things in AR.js in the past and it worked. I debugged by running my A-Frame stuff outside of AR with pure A-Frame. If it works there, it should work just fine in AR.js.

janpio on 1 May 2019

👍2

All 4 comments

janpio on 1 May 2019

👍2

@arifqz It is not a limitation of aframe-ar.js, In aframe 0.9.0 instead of the old approach (0.8.0) :

 <a-animation attribute="rotation"
               dur="3000"
               to="0 360 0"
               repeat="indefinite">
        </a-animation>

Use this approach:

<!--HIRO MARKER IMAGE https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg -->
<!doctype HTML>
<html>
  <head>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
  </head>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
    <a-marker preset="hiro">
              <a-box color="tomato" depth="2" height="2" width="2" 
                animation="property: rotation; dur: 3000; to: 0 360 0; loop: true" >
              </a-box>
    </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

aframe ref: https://aframe.io/docs/0.9.0/components/animation.html

kalwalt on 28 May 2019

👍1

@arifqz It is not a limitation of aframe-ar.js, In aframe 0.9.0 instead of the old approach (0.8.0) :

 <a-animation attribute="rotation"
               dur="3000"
               to="0 360 0"
               repeat="indefinite">
        </a-animation>

Use this approach:

<!--HIRO MARKER IMAGE https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg -->
<!doctype HTML>
<html>
  <head>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
  </head>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
      <a-marker preset="hiro">
              <a-box color="tomato" depth="2" height="2" width="2" 
                animation="property: rotation; dur: 3000; to: 0 360 0; loop: true" >
              </a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

aframe ref: https://aframe.io/docs/0.9.0/components/animation.html

I'm sorry but I used your code and the box doesn't rotate as it is expected to be.

zkyf on 27 Jun 2019

@zkyf i have no idea at the message, what Is the reson of your issue. It could be related to aframe, maybe the browser? Have you tried with another browser?

kalwalt on 27 Jun 2019

Was this page helpful?

0 / 5 - 0 ratings