前回から AR.jsA-Frame の組み合わせで実現する WebAR を試しています。前回は AR.js公式ページで紹介されている Marker Based WebAR のサンプルプログラムの使用方法を紹介しました。

AR.jsとA-Frameで簡単にWebARを実現 Part.1

今回はこのサンプルプログラムを修正して、以前 WebVRで試したものを WebARで表示してみようと思います。
IMG_1140

【作業概要】

前回のサンプルプログラムを修正します。作業工程はほぼ同じとなります。
今回は HTMLファイルの修正時にプログラムの詳細説明もします。

 HTMLファイルの修正
 Netlifyにアップロード
 スマホでテスト


【HTMLファイルの修正】

前回作成した「index.html」は AR.js公式ページのサンプルをそのまま使用しましたが、それを以下の様に修正します。
AR Image_049

<!DOCTYPE html>
<html>
<head>
  <title>WebAR</title>
  <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js">
</script> </head> <body style="margin : 0px; overflow: hidden;"> <a-scene embedded arjs> <a-assets> <a-asset-item id="model-obj" src="images/Obj_Merlion_Big_01.obj">
</a-asset-item> <a-asset-item id="model-mtl" src="images/Obj_Merlion_Big_01.mtl">
</a-asset-item> </a-assets> <a-marker preset="hiro"> <a-obj-model position="0 0.5 -2" src="#model-obj" mtl="#model-mtl" rotation="0 0 0" scale="0.1 0.1 0.1"> </a-obj-model>
<a-plane position="0 1.5 -4" rotation="0 0 0" width="4" height="4" animation="property: rotation; from: 0 0 0; to: 0 -360 0;
dur: 4000; easing: linear; loop: true" src="images/Image_03.jpg"> </a-plane> <a-plane position="0 1.5 -4" rotation="0 180 0" width="4" height="4" animation="property: rotation; from: 0 180 0; to: 0 -180 0; dur: 4000; easing: linear; loop: true" src="images/Image_04.jpg"> </a-plane> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>

前回のサンプルプログラムは詳細を説明しなかったので、ここでは詳細の説明も含めます。
AR Image_050


【Netlifyにアップロード】

また Netlifyを使用します。Netlifyにアップするためフォルダを zip形式で圧縮します。また、今回は 3Dモデルや画像ファイルも必要となるので、ここでは「images」と言うフォルダに入れてあります
AR Image_051

また、この zipファイルを以下の Netlifyのサイトにアップします。zipファイルをドラッグアンドドロップするだけです。

https://app.netlify.com/drop

AR Image_052

無事にファイルのアップがされ、一時的な URLが発行されました。
AR Image_053


【スマホでテスト】

Netlifyで発行された URLを表示すると、WebARとしてカメラの起動許可を求められますので許可をあたえます。

また今回も「Hiro」と言うマーカーを使っています。ディスプレイ上に表示して試してみます

【Hiroマーカー】

AR Image_046

うまく表示されました。以前WebVRの説明で作成したものをARで実現できました。
AR Image_054

このように、AR.jsと A-Frame を使用した WebARはかなり簡単に実現ができます。

今回は一番簡単な黒い枠線のあるマーカーを利用した Marker Based WebARを試しましたが、次回は AR.jsの他の機能 Image Tracking WebAR を試してみようと思います。


Sponsored Link