Skip to content

Instantly share code, notes, and snippets.

@jeromeetienne

jeromeetienne/.block

Last active July 23, 2021 17:36
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jeromeetienne/feeb69257803e69f18dc3ea5f4fc6d71 to your computer and use it in GitHub Desktop.
Save jeromeetienne/feeb69257803e69f18dc3ea5f4fc6d71 to your computer and use it in GitHub Desktop.
Download ZIP
AR.js with a-frame - Augmented Reality in less than 10lines of html
Raw
.block
license: mit
Raw
README.md

This is an example of ar.js with a-frame. Less than 10lines of html and you get augmented reality!!!

Put an image of hiro marker in front of the camera. It will open a webpage which read the phone webcam, localize a hiro marker and add 3d on top of it, as you can see below. It has never been easier :)

Checkout AR.js - Efficient Augmented Reality for the Web.

Raw
index.html
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded artoolkit='sourceType: webcam;'>
<a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment