Stack Overflow
Stack Overflow

Questions tagged [ar.js]

AR.js is an open source framework for three.js, and a-frame, enabling the creation of augmented reality apps / websites.

AR.js is an open-source lightweight Augmented Reality framework, coming with features like Image Tracking, Marker Tracking and Location based AR, and enabling the creation of apps and websites. It works great with its satellites three.js and aframe.io.

For anything related to AR.js - Efficient Augmented Reality for the Web.

321 questions
3
votes
1 answer

Looking for a way in aframe to rotate and scale a model via touch when rendered over a marker

I'm loading this Collada (DAE) model with aframe 0.8.2 and using aframe-ar to display it over a Hiro marker:
German
  • 10,263
  • 4
  • 40
  • 56
3
votes
1 answer

AR.JS custom marker

I'm trying to use a custom marker for AR.JS. However after following the directions to create a custom marker and then change the marker presets, it still doesn't work. Any ideas on how to properly implement?
Peter Lum
  • 143
  • 4
  • 13
3
votes
1 answer

Play audio on marker detect A-frame AR.JS

I'm trying to play an audio source when a marker is detected with the A-frame and AR.JS libraries. Currently I have the following scene, camera, and marker:
Peter Lum
  • 143
  • 4
  • 13
3
votes
0 answers

Uncaught ExitStatus with AR.js on server

I'm using https://github.com/jeromeetienne/AR.js and three.js for an AR project, in local everything works fine but when I deploy on server (platform.sh), I got this error after accepting camera : Uncaught ExitStatus ar.js:19 message: "Program…
Tib
  • 2,553
  • 1
  • 27
  • 46
3
votes
1 answer

How to port Javascript library to React Native?

Could anyone give some general guidance or point to an example of how to port a JavaScript library into a React Native component? Specifically, I am interested in building a React Native component wrapper for AR.js, but I have no idea how to go…
Eric
  • 2,098
  • 4
  • 30
  • 44
3
votes
0 answers

How Can I use AR.js in Ionic Framework?

I am able to use the code on chrome browser but the code does not seem to work on Ionic. https://github.com/jeromeetienne/AR.js Or is their any other open source AR technology that I can use for Ionic. EzarTech isn't powerful enough for my…
Omkar Frozen
  • 157
  • 9
2
votes
0 answers

No playing sound on AR.js

I've been working Augmented Reality with AR.js for WebAR experiences & I need play sounds touching 3d objects on screen, but by now I can't, this is the code: Reproducción de…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/augmented-reality" class="post-tag grid--cell" title="show questions tagged 'augmented-reality'" rel="tag">augmented-reality</a> <a href="../../questions/tagged/interactive" class="post-tag grid--cell" title="show questions tagged 'interactive'" rel="tag">interactive</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 14 '23 at 23:06">asked Apr 14 '23 at 23:06</time> <a href="../../users/9363129/francisco" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9363129.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Franciscø" /> </a> <div class="s-user-card--info"> <a href="../../users/9363129/francisco" class="s-user-card--link">Franciscø</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">21</li> <li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-73903756"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/73903756/image-tracking-nft-on-ar-js-cannot-showing-3d-object" class="question-hyperlink">Image Tracking (nft) on Ar.js cannot showing 3d object</a></h3> <div class="excerpt">I have been trying to showing up 3d object on AR.js custom image (image tracking). what I believe is something wrong with my code. this NFT has been build by NFT marker and the object still didn't show up. Could you guys please check if there is any…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/3d" class="post-tag grid--cell" title="show questions tagged '3d'" rel="tag">3d</a> <a href="../../questions/tagged/augmented-reality" class="post-tag grid--cell" title="show questions tagged 'augmented-reality'" rel="tag">augmented-reality</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 30 '22 at 03:35">asked Sep 30 '22 at 03:35</time> <a href="../../users/13983585/fauzi-hamdani" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/13983585.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Fauzi Hamdani" /> </a> <div class="s-user-card--info"> <a href="../../users/13983585/fauzi-hamdani" class="s-user-card--link">Fauzi Hamdani</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">21</li> <li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-73821316"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/73821316/how-to-display-mirror-image-of-camera-in-aframe" class="question-hyperlink">How to display mirror image of camera in aframe?</a></h3> <div class="excerpt">If I'm using the front-facing camera of my laptop, I want to display the mirror image on the screen. How can I achieve this? Right now, when I raise my left hand, the image feed raises its right. I want to invert this if possible, such that the…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/three.js" class="post-tag grid--cell" title="show questions tagged 'three.js'" rel="tag">three.js</a> <a href="../../questions/tagged/aframe" class="post-tag grid--cell" title="show questions tagged 'aframe'" rel="tag">aframe</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 22 '22 at 22:37">asked Sep 22 '22 at 22:37</time> <a href="../../users/20065404/j-stillo" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/20065404.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="j_stillo" /> </a> <div class="s-user-card--info"> <a href="../../users/20065404/j-stillo" class="s-user-card--link">j_stillo</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">21</li> <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-73229816"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/73229816/how-to-dynamically-change-object-coordinates-in-ar-js" class="question-hyperlink">How to dynamically change object coordinates in ar.js?</a></h3> <div class="excerpt">I use for augmented reality AR.js https://github.com/AR-js-org/AR.js (Location Based AR AFRAME version). I am trying to use this: document.getElementById('main_model').setAttribute('gps-entity-place', { latitude: new_latitude, longitude:…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/augmented-reality" class="post-tag grid--cell" title="show questions tagged 'augmented-reality'" rel="tag">augmented-reality</a> <a href="../../questions/tagged/aframe" class="post-tag grid--cell" title="show questions tagged 'aframe'" rel="tag">aframe</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 04 '22 at 02:44">asked Aug 04 '22 at 02:44</time> <a href="../../users/19679057/vr-dynamics" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/19679057.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="VR Dynamics" /> </a> <div class="s-user-card--info"> <a href="../../users/19679057/vr-dynamics" class="s-user-card--link">VR Dynamics</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">68</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-70163671"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/70163671/updated-question-how-to-set-the-correct-device-camera-with-arjs-and-aframe" class="question-hyperlink">Updated Question - How to set the correct device camera with ARJS and Aframe?</a></h3> <div class="excerpt">I'm using the aframe with ARJS to build an Augmented Reality app. What I'm trying to do is to set the camera to stay fixed with my device camera. when I run my app I see the camera shifted up and left. This causes my AR video to be out of the image…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/aframe" class="post-tag grid--cell" title="show questions tagged 'aframe'" rel="tag">aframe</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 30 '21 at 02:43">asked Nov 30 '21 at 02:43</time> <a href="../../users/1703696/pablo-darde" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1703696.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Pablo Darde" /> </a> <div class="s-user-card--info"> <a href="../../users/1703696/pablo-darde" class="s-user-card--link">Pablo Darde</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,844</li> <li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li> <li class="s-award-bling s-award-bling__silver" title="37 silver badges">37</li> <li class="s-award-bling s-award-bling__bronze" title="55 bronze badges">55</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-68738475"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/68738475/ar-js-final-answer-to-click-events-on-mobile-devices-and-in-corners" class="question-hyperlink">AR.JS Final Answer to Click Events on Mobile Devices and in Corners</a></h3> <div class="excerpt">I have been struggeling the past weeks with A-Frame / AR.JS click events and bringing it to mobile web browsers. I tried every tutorial and read all related github issues but still no luck. I simply want to display a number of a-boxes (e.g. 6) above…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/augmented-reality" class="post-tag grid--cell" title="show questions tagged 'augmented-reality'" rel="tag">augmented-reality</a> <a href="../../questions/tagged/aframe" class="post-tag grid--cell" title="show questions tagged 'aframe'" rel="tag">aframe</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 11 '21 at 08:25">asked Aug 11 '21 at 08:25</time> <a href="../../users/1194480/daniel05" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1194480.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Daniel05" /> </a> <div class="s-user-card--info"> <a href="../../users/1194480/daniel05" class="s-user-card--link">Daniel05</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">105</li> <li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-68004043"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/68004043/is-it-possible-to-change-gps-camera-properties-in-ar-js" class="question-hyperlink">Is it possible to change gps-camera properties in AR.js?</a></h3> <div class="excerpt">Hey I have set up a Scene, where I use the simulate Coordinates property of the gps-camera. Like this: <a-scene embedded arjs renderer="logarithmicDepthBuffer: true;" vr-mode-ui="enabled: false" gesture-detector id="scene"> <a-marker…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/augmented-reality" class="post-tag grid--cell" title="show questions tagged 'augmented-reality'" rel="tag">augmented-reality</a> <a href="../../questions/tagged/aframe" class="post-tag grid--cell" title="show questions tagged 'aframe'" rel="tag">aframe</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 16 '21 at 13:50">asked Jun 16 '21 at 13:50</time> <a href="../../users/11512384/cypherduck" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11512384.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="cypherduck" /> </a> <div class="s-user-card--info"> <a href="../../users/11512384/cypherduck" class="s-user-card--link">cypherduck</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">61</li> <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-67641811"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/67641811/how-to-use-three-js-and-threex-and-ar-js-cdn-in-my-react-component" class="question-hyperlink">How to use THREE.js (and THREEx and AR.js) CDN in my react component?</a></h3> <div class="excerpt">I thought react is less pain than Angular for such projects, and you could still mix "plain" javascript into your project. So I have in my react project in index.html this script tags: I try to integrate this example of AR.js into my react…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> <a href="../../questions/tagged/three.js" class="post-tag grid--cell" title="show questions tagged 'three.js'" rel="tag">three.js</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 21 '21 at 17:56">asked May 21 '21 at 17:56</time> <a href="../../users/3037960/suisse" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3037960.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Suisse" /> </a> <div class="s-user-card--info"> <a href="../../users/3037960/suisse" class="s-user-card--link">Suisse</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,467</li> <li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li> <li class="s-award-bling s-award-bling__silver" title="36 silver badges">36</li> <li class="s-award-bling s-award-bling__bronze" title="59 bronze badges">59</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-67604320"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/67604320/how-to-change-the-size-of-a-scene-in-browser" class="question-hyperlink">How to change the size of <a-scene> in Browser?</a></h3> <div class="excerpt">I don't want to have my a-scene in fullscreen. I tried to add "embedded" to the scene and then change it with css but that does not work. My html: <!DOCTYPE html> <html> <link rel="stylesheet" href="css/style.css"> <script…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/three.js" class="post-tag grid--cell" title="show questions tagged 'three.js'" rel="tag">three.js</a> <a href="../../questions/tagged/augmented-reality" class="post-tag grid--cell" title="show questions tagged 'augmented-reality'" rel="tag">augmented-reality</a> <a href="../../questions/tagged/aframe" class="post-tag grid--cell" title="show questions tagged 'aframe'" rel="tag">aframe</a> <a href="../../questions/tagged/ar.js" class="post-tag grid--cell" title="show questions tagged 'ar.js'" rel="tag">ar.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 19 '21 at 13:32">asked May 19 '21 at 13:32</time> <a href="../../users/11512384/cypherduck" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11512384.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="cypherduck" /> </a> <div class="s-user-card--info"> <a href="../../users/11512384/cypherduck" class="s-user-card--link">cypherduck</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">61</li> <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/ar.js_page=2" rel="prev" title="Go to page 2">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/ar.js_page=1" rel="" title="Go to page 1">1</a> <a class="s-pagination--item" href="../../questions/tagged/ar.js_page=2" rel="" title="Go to page 2">2</a> <div class="s-pagination--item is-selected">3</div> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/ar.js_page=21" rel="" title="Go to page 21">21</a> <a class="s-pagination--item" href="../../questions/tagged/ar.js_page=22" rel="" title="Go to page 22">22</a> <a class="s-pagination--item" href="../../questions/tagged/ar.js_page=4" rel="next" title="Go to page 4"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>