WebARで画像や3Dを表示する方法

API

前回のWebARの投稿「マーカーを利用したWebARを作る方法」では、テキストのみを表示しただけだったので、今回は、画像や３D、図形を表示させようと思います。

WebARを動かすライブラリ

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

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

ソースと説明

「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

●図形

<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-box position="0 0.5 0" wireframe="true"></a-box>
      <!-- 球体を表示 -->
	  <a-sphere radius="0.5" position="0 0.5 0">
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>
wireframe="true"　でワイヤーフレームが表示されます

a-sphere radius="0.5″　で球体が表示されます。

●画像

<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-assets>
   <img id="icon_4b_128" src="icon_4b_128.png">
  </a-assets>
　<!-- マーカーを指定 -->
  <a-marker preset="custom" type='pattern' url="my_marker.patt">
 　　<!-- 画像を表示 -->
    <a-image id="icon_4b_128" src="#icon_4b_128" position="0 0 0" rotation="-90 0 0">
    </a-image>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
</body>
</html>
a-assetsで画像を指定します

a-obj-modelで画像を表示します

●3D

<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">
    <!-- 3Dを指定 -->
    <a-assets>
        <a-asset-item id="Air_Balloon-obj" src="Air_Balloon.obj"></a-asset-item>
        <a-asset-item id="Air_Balloon-mtl" src="Air_Balloon.mtl"></a-asset-item>
    </a-assets>
    <!-- マーカーを指定 -->
    <a-marker preset="custom" type='pattern' url="my_marker.patt">
      <!-- 3Dを表示 -->
      <a-obj-model id="Air_Balloon" src="#Air_Balloon-obj" mtl="#Air_Balloon-mtl" position="0 0.1 0" scale="0.1 0.1 0.1" rotation="-50 0 0"></a-obj-model>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>
a-assetsで3Dオブジェクトを指定します

a-obj-modelで3Dを表示します

＊3Dは下記のサイトのフリー3Dを使いました。
https://free3d.com/ja/

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

動作

スマホのブラウザで作成したソースのアドレスにアクセスします。

●図形

●画像

●3D

次回は、WebARで画像や3Dにアニメーションを付けます。
https://jipulog.com/155/

参考サイト

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

https://www.capa.co.jp/archives/23815

API