[Q&A] AR.jsで平面の画像を表示させる方法を教えてください

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"

2Answer

@chiiirotty posted at 2023-05-26

https://codepen.io/blttsxag-the-solid/pen/ZEqPMzR
↑現状です。カメラは起動しますが、イッヌは現れません。

HTML.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>
    <a-marker preset="hiro">
       <a-entity
          position="0 -2 0"
          scale="1.5 1.5 1.5"
          rotation="0 0 0"
          height="-1"
          gltf-model="https://arjs-cors-proxy.herokuapp.com/https://firebasestorage.googleapis.com/[アップロードしたファイルの情報]">
      </a-entity>
    </a-marker>
      <a-entity camera></a-entity>
  </a-scene>
</body>

以下の記事を参考に、2D画像を3Dのglbファイルに変換後、ファイルをFirebaseのStorageにアップロードしたURLを貼り付けましたがうまくいきませんでした・・・
【推しを愛でるプロジェクト第2弾】バイクと推しキャラをWeb上ARカメラで立体表示してみた #推し活 #バイク好き

Comments

@chiiirotty
Questioner
他の場所で質問に答えてくれる方がいて、解決しました。後ほど解決方法の記事を書きますので、その記事をもってこのQAはクローズといたします。見てくださった方、ありがとうございました。

@chiiirotty posted at 2023-05-27

AR.jsで2D画像を表示させるための方法をQiita記事にまとめました！
【初心者でも1時間でできる！】撮った写真をAR化していつでもどこでもｲｯﾇといっしょ🐶
誰かの役に立ちますように