WebARを作る方法

API

2020年から5Gサービスが始まって、ARが再び注目を浴びるような記事をみたので、Webブラウザから動作する「WebAR」を触ってみました。

WebARを動かすには、「A-Frame」と「AR.js」を使います。

WebARを動かすライブラリ

・A-Frameライブラリ
　https://github.com/aframevr/aframe

・AR.jsライブラリ
　https://github.com/jeromeetienne/AR.js

ソースと説明

とりあえず、マーカーに文字列が表示されるWebARを作ってみます。

<html lang="ja">
<head>
<meta charset="utf-8">
<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script></head>
<body style='margin:0px; overflow:hidden;'>
  <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
    <!-- マーカーを指定 -->
    <a-marker preset="custom" type='pattern' url="my_marker.patt">
      <!-- 表示させるテキスト -->
      <a-text value="Hello WebAR !" position="-0.5 0.5 0" rotation="-90 0 0" color="#0000ff"></a-text>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>

「A-Frame」と「AR.js」のjavascriptライブラリを読み込みます。

<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script></head>
a-markerタグのurlでマーカーを指定します。
マーカーは、下記のサイトで作成することができます。
AR.js Marker Training

a-textタグのvalueで表示させたい文字を指定します。
ただし、テキストは日本語を使えませんでした。

positionは、位置(X, Y, Z)を表ます。
Xが横(+が右、-が左)、Yが中央（+中央上、-が中央下）、Zが縦（+が上、-が下）

rotationは、回転の角度(X, Y, Z)になります。

viewportを使うと、ポジションがずれるらしく、正しく表示されず、はまりました。
<meta name="viewport" content="width=device-width,intial-scale=1">

動作

スマホのブラウザで作成したソースのアドレスにアクセスします。
＊WebARは、HTTPS通信しか表示できないようです。

次回は、WebARを使って3Dや画像を表示させます。
https://jipulog.com/150/

参考サイト

https://qiita.com/poccariswet/items/5f24b23341626f9e0f5d
https://qiita.com/567000/items/76600164370e58d5abfa

API