Hey guys! I tried AR!
In this article, I will explain how to develop this application.
I read the following document in order to create it.
There are three main types of AR.js.
- Image Tracking. Recognizes a specific image and displays a model on top of it.
- Location Based AR. Display a model at a specific location.
- Marker Tracking. Displays the model at a specific marker location.
The type I use this time is Marker Tracking.
Depending on which type you use, there are slight differences in what you need to import.
Since I use Marker Tracking now, I only need to import the following.
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
Now it looks like I can use AR. Easy!
AR.js has a pre-set marker called hiro and if you want to use, just write as the follows.
In this case, I wanted to use my own marker, so I visited to this site to create one.
You can change the image whatever you want, but now I use this one.
Set the downloaded marker under the assets folder.
<a-marker preset="custom" type="pattern" url="assets/pattern-marker.patt"> // Set the model to be displayed in this. </a-marker>
Even if you don't have your own model, you can use
a-text to display text, or
a-box to display a box, so it will be fun enough to just play with the pre-prepared ones.
This time, I downloaded a nice wolf model from Free3D, so I'll display it.
gltf format model, so I'll specify the id as follows.
The model should be loaded in
<a-assets> <a-asset-item id="wolf" src="assets/Wolf-Blender-2.82a.glb" ></a-asset-item> </a-assets>
Now I can display it. Very easy.
The whole code.
<body> <a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;" > <a-assets> <a-asset-item id="wolf" src="assets/Wolf-Blender-2.82a.glb" ></a-asset-item> </a-assets> <a-marker preset="custom" type="pattern" url="assets/pattern-marker.patt"> <a-entity id="model" gltf-model="#wolf" position="0 0 1" scale="1 1 1" rotation="0 -90 60" > </a-entity> </a-marker> <a-entity camera></a-entity> </a-scene> </body>
Thanks for reading.
This is my first time to use AR, but it was really easy.
I will try more :D
Please send me a message if you need.