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