Tutorial 1 : Display texts and cubes on the marker
1. Import AR.js
Add libraries into the head tag
code: html
2. Add scene tag into the body tag
Add a-scene tag into the body tag
It will be changed from VR space to AR space, by adding embedded attribute and arjs attribute to <a-scene>,
The basic operation is described in the scene tag
code: html
<body style='margin : 0px; overflow : hidden;'>
<a-scene embedded arjs>
<!-- basic operation HERE -->
</a-scene>
</body>
3. Add marker
Use "Hiro Marker", preset of AR.js
https://upload.wikimedia.org/wikipedia/commons/4/48/Hiro_marker_ARjs.png
Register the marker by using <a-marker>.
The Hiro marker is already registered as a preset, so we can use it with preset = "hiro".
The object is described in the a-marker tag, after recognizing markers.
code:html
<body style='margin : 0px; overflow : hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
<!-- Object Information HERE -->
</a-marker>
</a-scene>
</body>
4. Add displaying object
This time, we try to display the cube and texts on the marker.
Cube can be described by a-box tag, and text can be described by a-text tag.
code: html
<body style='margin : 0px; overflow : hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position="0 1 0" ></a-box>
<a-text value="test" position="0 0 0" align="center"></a-text>
</a-marker>
</a-scene>
</body>
The position can be changed in the tag with position "x-axis y-axis z-axis".
https://alaki.co.jp/blog/wp-content/uploads/2019/02/IMG_3199.jpg
5. Add camera
Since it is necessary to start the camera at the end, start it after loading all the objects
The camera is installed with <a-entity camera>
code:html
<body style='margin : 0px; overflow : hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position="0 1 0" ></a-box>
<a-text value="test" position="0 0 0" align="center"></a-text>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
6. Publishing
The final script is as follows
code: webar_cude.html
<!doctype HTML>
<html>
<head>
</head>
<body style='margin : 0px; overflow : hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position="0 1 0" ></a-box>
<a-text value="test" position="0 0 0" align="center"></a-text>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>