前回から AR.js と A-Frame の組み合わせで実現する WebAR を試しています。前回は AR.js公式ページで紹介されている Marker Based WebAR のサンプルプログラムの使用方法を紹介しました。
【AR.jsとA-Frameで簡単にWebARを実現 Part.1】
今回はこのサンプルプログラムを修正して、以前 WebVRで試したものを WebARで表示してみようと思います。

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

また、この zipファイルを以下の Netlifyのサイトにアップします。zipファイルをドラッグアンドドロップするだけです。
https://app.netlify.com/drop
【AR.jsとA-Frameで簡単にWebARを実現 Part.1】
今回はこのサンプルプログラムを修正して、以前 WebVRで試したものを WebARで表示してみようと思います。

【作業概要】
前回のサンプルプログラムを修正します。作業工程はほぼ同じとなります。
今回は HTMLファイルの修正時にプログラムの詳細説明もします。
HTMLファイルの修正
Netlifyにアップロード
スマホでテスト
前回のサンプルプログラムを修正します。作業工程はほぼ同じとなります。
今回は HTMLファイルの修正時にプログラムの詳細説明もします。
HTMLファイルの修正
Netlifyにアップロード
スマホでテスト
<!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>
【Netlifyにアップロード】
また Netlifyを使用します。Netlifyにアップするためフォルダを zip形式で圧縮します。また、今回は 3Dモデルや画像ファイルも必要となるので、ここでは「images」と言うフォルダに入れてあります。

また、この zipファイルを以下の Netlifyのサイトにアップします。zipファイルをドラッグアンドドロップするだけです。
https://app.netlify.com/drop
【スマホでテスト】
Netlifyで発行された URLを表示すると、WebARとしてカメラの起動許可を求められますので許可をあたえます。
また今回も「Hiro」と言うマーカーを使っています。ディスプレイ上に表示して試してみます。
【Hiroマーカー】

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

このように、AR.jsと A-Frame を使用した WebARはかなり簡単に実現ができます。
今回は一番簡単な黒い枠線のあるマーカーを利用した Marker Based WebARを試しましたが、次回は AR.jsの他の機能 Image Tracking WebAR を試してみようと思います。
Netlifyで発行された URLを表示すると、WebARとしてカメラの起動許可を求められますので許可をあたえます。
また今回も「Hiro」と言うマーカーを使っています。ディスプレイ上に表示して試してみます。
【Hiroマーカー】

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

このように、AR.jsと A-Frame を使用した WebARはかなり簡単に実現ができます。
今回は一番簡単な黒い枠線のあるマーカーを利用した Marker Based WebARを試しましたが、次回は AR.jsの他の機能 Image Tracking WebAR を試してみようと思います。
Sponsored Link