A-Frame: https://aframe.io
AR.js: https://github.com/jeromeetienne/AR.js
謝辞:ここで紹介するソフトウェアの作者に感謝します.
参考Webページ
https://medium.com/@akashkuttappa/using-3d-models-with-ar-js-and-a-frame-84d462efe498
次のページに記載のサンプルプログラムのうち,マーカーベースの AR のものを使う.(タイプミスと思われる部分を修正,a-box を使うように変更,URLを最新にものに修正など).
https://ar-js-org.github.io/AR.js-Docs/#getting-started
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"> <title>marker AR</title> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <!-- we import arjs version without NFT but with marker + location based support --> <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-marker preset="hiro"> <a-box position="0 0.5 0" wireframe="true"></a-box> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>
カメラの使用の許可についての表示が出た場合には許可する.
カメラ画像が現れるので確認する.
https://github.com/AR-js-org/AR.js/blob/master/data/images/hiro.png
カメラで,マーカー画像 hiro.pngを撮影すると,箱が現れるので確認する.