Hey guys! I tried AR!
In this article, I will explain how to develop this application.
DEMO: https://yuikoito.github.io/ar-sample/
github: https://github.com/yuikoito/ar-sample
Setup
I read the following document in order to create it.
https://ar-js-org.github.io/AR.js-Docs/
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!
Use an original marker
AR.js has a pre-set marker called hiro and if you want to use, just write as the follows.
<a-marker preset="hiro">
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>
Display an original 3D model
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.
This is gltf format model, so I'll specify the id as follows.
<a-entity gltf-model="#wolf"></a-entity>
The model should be loaded in a-assets beforehand.
<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>
That's it!
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.
yuiko.dev@gmail.com
https://twitter.com/yui_active
🍎🍎🍎🍎🍎🍎
Top comments (0)