Tips 2 : Display the 3D object on the original image

1. Introduction

This section explain the Image Tracking introduced in Basic information of AR.js

Please note that this chapter follows the AR.js tutorial and puts the images on github

2. Prepare image files

Not all image files can be used, the image needs to have a large amount of features

Go to NFT Marker Creator, and upload the image and check the score

Press the generate button to download the 3 files iset / fset / fset3

Put the data on github

code: file

sample_image

├ sample.iset

├ sample.fset

└ sample.fset3

This time, we will use the following image

https://gyazo.com/2d07d07e8a6bf434823a67049e5ff819

3. Import libraries

When tracking image with NFT, the following two libraries are required unlike Marker Tracking

Enter this script into the head tags

code: html

4. Image registration using NFT

The path is <username> / <repository name> / <branch name> / <file path>

Also, describe the three files iset / fset / fset3 with the extension name removed

Therefore, in this case, it will be https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/<user_name>/<repository_name>/<branch_name>/sample_image/sample

code: html

<a-scene embedded arjs>

<a-nft

type="nft"

url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/< Enter Path HERE >"

smooth="true"

smoothCount="10"

smoothTolerance=".01"

smoothThreshold="5"

</a-nft>

</a-scene>

5. Add an object to display

Add an object in the a-nft tags

code: html

<a-scene embedded arjs>

<a-nft

type="nft"

url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/< Enter Path HERE >"

smooth="true"

smoothCount="10"

smoothTolerance=".01"

smoothThreshold="5"

<a-box position="0 0 0" width="100"></a-box>

</a-nft>

</a-scene>

6. Add camera

code:html

<a-scene embedded arjs>

<a-nft

type="nft"

url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/< Enter Path HERE >"

smooth="true"

smoothCount="10"

smoothTolerance=".01"

smoothThreshold="5"

<a-box position="0 0 0" scale="75 75 75"></a-box>

</a-nft>

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

</a-scene>

7. Publish

Finally, Publish the file to the web.

The final script is as follows

code: html

<!doctype HTML>

<html>

<head>

</head>

<a-scene >

<a-nft

type="nft"

url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/<user_name>/<repository_name>/<branch_name>/sample_image/sample"

smooth="true"

smoothCount="10"

smoothTolerance=".01"

smoothThreshold="5"

<a-box position="0 0 0" scale="75 75 75"></a-box>

</a-nft>

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

</a-scene>

</body>

</html>

#Tips