ar.js
Version:
Efficient Augmented Reality for the Web
35 lines (26 loc) • 1.38 kB
HTML
<!-- include a-frame -->
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<!-- include ar.js for aframe -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
<!-- add some info at the top of the page -->
<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - tango example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<!-- Define your 3d scene and enabled ar.js -->
<a-scene embedded arjs='trackingMethod: best; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;'>
<!-- Create a anchor to attach your augmented reality -->
<a-anchor hit-testing-enabled='true'>
<!-- Add your augmented reality here -->
<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
</a-anchor>
<!-- Define a static camera -->
<a-camera-static/>
</a-scene>
</body>