Try AR: Using AR.js to Display a wolf
Tags: arjs, ar
Published: 2021-08-31 12:50:55

Hey guys! I tried AR!

[![Image from Gyazo](https://i.gyazo.com/a564241c6d870ff2d7d962324ae653f4.gif)](https://gyazo.com/a564241c6d870ff2d7d962324ae653f4)


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.

```html
  <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.

```html
<a-marker preset="hiro">
```

In this case, I wanted to use my own marker, so I visited to [this site](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html) to create one.

You can change the image whatever you want, but now I use this one.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8daj56xfuvlcrnx5fdx.png)
 

Set the downloaded marker under the assets folder.

```html
<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](https://free3d.com/), so I'll display it. 

This is ``gltf`` format model, so I'll specify the id as follows.

```html
<a-entity gltf-model="#wolf"></a-entity>
```

The model should be loaded in ``a-assets`` beforehand.


```html
      <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.


```html
  <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

🍎🍎🍎🍎🍎🍎