So this tutorial is a small attempt to bring the people, places and things made in Anyland to 'Real Life' using augmented reality and the web.
Here's what we can bring in:
Before we get started, we need to do a few things:
- Find Hosting, Neocities.org and Glitch.com provide free front-end services which will suit our needs (you can also do this on your own with a text editor and an html file remotely - try downloading atom or sublime text. If you're really hardcore, you can use Vim in a terminal..)
- Export a thing or world from Anyland
- Print out a Hiro and a Kanji marker.
<html>
<head>
<title>My Anyland AvatAR</title>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded artoolkit="sourceType: webcam;">
<a-assets>
<a-asset-item id="headobj" src="/webAR/avatAR/assets/head.obj"></a-asset-item>
<a-asset-item id="headmtl" src="/webAR/avatAR/assets/head.mtl"></a-asset-item>
</a-assets>
<a-marker preset="hiro">
<a-obj-model src="#headobj" mtl="#headmtl" position="0 0 0" rotation="0 90 -90" scale="1.8 1.8 1.8">
</a-obj-model>
</a-marker>
<a-marker preset="kanji">
<a-cone radius-bottom="0.5" radius-top="0" height="1" color="#ff00ff"></a-cone>
<a-sphere position="-0.3 0 0.3" color="yellow" radius="0.5"></a-sphere>
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.a" size="1">
<a-box position="0 0 0" scale="1.5 1.5 1.5" color="yellow"></a-box>
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.b" size="1">
<a-box position="0 0 0" scale="1.5 1.5 1.5" color="green"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
If I missed anything or need to be clearer on any of the steps please reach out to me in realm (I'm often CTRLH) or online at @_liooil