aframe Getting started with aframe Getting started for AR
Example
To create AR applications on the web, you need to add a new library named AR.js. First you load A-frame followed by AR.js.
Newt you must setup you scene using the A-frames a-scene-tag with the artoolkit-attribute added. The sourceType must be your webcam. The font-camera of your smartphone is also supported using this.
the a-marker-camera-tag marks an image inside the recorded screen that represents an image. In this case it's marker.png. When the camera detects this marker the box will be displayed on the marker.
Below you could find the example code:
<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>
<a-scene artoolkit='sourceType: webcam;'>
<a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='marker.png'></a-marker-camera>
</a-scene>
</body>
