Skip to content

Basic A-Frame support for the new three.ar.js library and WebARonARKit / WebARonARCore browsers.

License

Notifications You must be signed in to change notification settings

aborovsky/aframe-ar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

aframe-ar

Basic A-Frame support for browser-based augmented reality (AR), supporting the new three.ar.js library and WebARonARKit/Core browsers, as well as WebXR Viewer.

By simply adding the ar component to your A-Frame scene declaration:

<a-scene ar>
...
</a-scene>

aframe-ar will, when using a supported browser, take over the scene camera using information from ARKit / ARCore.

Basic usage:

<!-- First, include whichever version of A-Frame you like. -->
<script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script>
<!-- Next, include three.ar.js; add the speech recognition polyfill if you want. -->
<script src="https://rawgit.com/google-ar/three.ar.js/master/dist/three.ar.js"></script>
<!-- Last, include aframe-ar. -->
<script src="https://rawgit.com/chenzlabs/aframe-ar/master/dist/aframe-ar.js"></script>

<!-- Place the ar component on your scene, and the camera will use AR by default. -->
<a-scene ar>
  <a-sphere radius="0.01" position="0 0.005 -0.5"></a-sphere>
<a-scene>  

Examples:

Basic AR camera: https://aframe-ar.glitch.me

ar-raycaster usage: https://aframe-ar-raycaster-logo-test.glitch.me/ar.html

Plane detection and visualization: https://aframe-ar-plane.glitch.me

https://aframe-ar-dragonites.glitch.me with many thanks to Twitter user @uveavanto et al.

Reference links:

About

Basic A-Frame support for the new three.ar.js library and WebARonARKit / WebARonARCore browsers.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%