AR.jsで平面の画像を表示させる方法を教えてください
解決したいこと
AR.jsで平面の画像を表示させたいです。どうかお力を貸していただけますと幸いです。
使用言語：HTML
使用環境：CodePen
現状
以下のように、緑の3Dボックスを表示することはできます。
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ar.js/2.2.2/aframe-ar.min.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- hiroマーカーが認識されたら -->
<a-marker preset="hiro">
<!-- ボックスを表示します -->
<a-box position="0 0.8 0" wireframe="false" color="#82F233" width="0.7" height="0.7" depth="0.7" >
<a-animation attribute="rotation" from="20 0 0" to="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"></a-animation>
</a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
やりたいこと
以下の2D写真を、現在緑の3Dボックスが表示されているところに表示させたいです。Googleドライブで共有リンクは取得済みです。
試したこと
マーカーベースARだとうまくいかないのかと思い、この記事のローケーションベースARのコードを試してみました。
【Tech Blog】Web AR の実現例とライブラリについて②
発生している問題・エラー
上記コードを試すと、以下のようなエラーが出てしまいます。
"%cA-Frame:warn %cPut the A-Frame <script> tag in the <head> of the HTML *before* the scene to ensure everything for A-Frame is properly registered before they are used from HTML.%c " "color: orange" "color: inherit" "color: orange"
"A-Frame Version: 1.0.0 (Date 2019-12-14, Commit #dc7d6174)"
"three Version (https://github.com/supermedium/three.js):" "^0.111.4"
"WebVR Polyfill Version:" "^0.10.10"
"%cdevice:error %cWebXR session support error: Failed to execute 'isSessionSupported' on 'XRSystem': Access to the feature 'xr' is disallowed by permissions policy.%c " "color: lightseagreen" "color: inherit" "color: lightseagreen"
"%ccore:a-assets:warn %cAsset loading timed out in %c " "color: orange" "color: inherit" "color: orange" 3000 "ms"
1
