Tutorial 2 : Use original markers

1. Introduction

Create original markers and recognize them

This section, we use some of the scripts from Tutorial 1

code: html

<!doctype HTML>

<html>

<head>

</head>

<a-scene embedded arjs>

<a-entity camera></a-entity>

</a-scene>

</body>

</html>

2. Prepare markers

Use AR.js Marker Training and create markers

Push UPLOAD to select the image, and download the patt file and png file

https://gyazo.com/4c27b33fe6162cef0c1cd245494120fb

This section we use this marker below

https://gyazo.com/5b42b2e4b4ebe008e2a36e4382e49591

Move the downloaded patt file under marker_list which exists in the same directory as the html file.

code: file

marker_list

└ qrcode.patt

index.html

3.Add markers

Change "hiro" to "custom", since it is a marker that is not included in the preset

Enter the path containing the patt file in url

(This time the marker_list file exists in the same directory as the html file, so the url is "marker_list / qrcode.patt")

code: html

<a-scene embedded arjs>

<a-marker preset="custom" type="pattern" url="marker_list/qrcode.patt">

<a-box position="0 1 0" ></a-box>

</a-marker>

<a-entity camera></a-entity>

</a-scene>

</body>

</html>

4. Publish

Finally, Publish the file to the web.

The final script is as follows

code: webar_customcode.html

<!doctype HTML>

<html>

<head>

</head>

<a-scene embedded arjs>

<a-marker preset="custom" type="pattern" url="marker_list/qrcode.patt">

<a-box position="0 1 0"></a-box>

</a-marker>

<a-entity camera></a-entity>

</a-scene>

</body>

</html>

#Tutorial