Try AR: Using AR.js to Display a wolf

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>