WebARで画像や3Dを動かす方法

API

前回のWebARの投稿「マーカーを利用したWebARで画像や3Dを表示する」で作成した3Dと画像をアニメーションさせようと思います。

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-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-animation attribute="position" to="-0.5 0 0" direction="alternate" dur="1000" repeat="indefinite" easing="linear">
      </a-animation>
    </a-image>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
</body>
</html>
a-animationタグで動きを指定しています

●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-animation attribute="position" to="-0.5 0 0" direction="alternate" dur="1000" repeat="indefinite" easing="linear">
      </a-animation>
      </a-obj-model>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>
a-animationタグで動きを指定しています
　attribute = アニメーションの属性（position, material.color, rotation, scaleなど）
　begin = アニメーションが開始されるための動作（click, cursor-fusing）
　delay = アニメーション開始待機時間(ミリ秒)
　direction = fromからtoまでのアニメーションの動作（normal, reverse）
　dur = アニメーション時間(ミリ秒)を指定
　easing = アニメーション動作処理（linear, ease）
　from = 開始値（例：0 0 0）
　to = 終了値（例：0 0 0）

　例では、左に-0.5動かしています。

viewportを使うと、ポジションがずれるらしく、正しく表示されず、はまりました。
<meta name="viewport" content="width=device-width,intial-scale=1">
AR.js、A-Frameのバージョンによって、アニメーションが動作しない場合があります。

動作

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

左にスライドして動作することがわかります。

●画像

●3D

参考サイト

https://note.com/shidaka/n/nf97e7bad23cc
https://www.capa.co.jp/archives/23815

API