WebARまとめ

ここ数日で一通りのことを理解し、出来るようになりました。
・github まだ十分とは言えませんが使えるようになりました。
・nft-marker-creatorにより任意の画像をマーカーにすることができます。
 web版もありますが、nodeというプログラムでも扱えます。ただ、github上に置いたファイルへのリンクの仕方が独特のようで、これに何日も悩まされました
・a-frame ar.js model-viewerについても概略理解できました
そこで、まとめてみたのが添付のpdfです。

urlへ案内するため、どうしてもQRコードが必要ですから、更に画像認識をさせる意味があまりないような気もします。凝ったレイアウトであれば別ですが。
添付のパノラマ写真などは面白いと思います。
お暇な時にご覧いただき、ご意見をお聞かせください。

WebARまとめ資料(pdf

パノラマ写真のソースコード
わずか数行で実現できる

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Image</title>
    <meta name="description" content="360&deg; Image - A-Frame">
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/jirochanf/ar/master/assets/pano2.jpeg" rotation="0 -130 0"></a-sky>

      <a-text value="津島高校にて" width="6" position="-2.5 0.25 -1.5"
              rotation="0 15 0"></a-text>
    </a-scene>
  </body>
</html>

WebAR 習作

WebARの習作集

QRコードでアクセスし、カメラを許可して、デフォルトマーカーを撮影

マーカー上に動画ファイルを再生
https://jirochanf.github.io/kinga/video.html

マーカー右上に3Dモデル(benz)を表示
 https://jirochanf.github.io/kinga/3d.html

マーカー上に(pizza)画像を表示
 https://jirochanf.github.io/kinga/pic.html

マーカーなしで動画ファイルを再生(safariで再生されない)
 https://jirochanf.github.io/kinga/video0.html

マーカーなしで3Dモデル(benz)を表示  丸いARマークをクリック、model-viewerを利用・
 https://jirochanf.github.io/kinga/3dbenz.html

マーカーなしで3Dモデル(chair)を表示  丸いARマークをクリック、model-viewerを利用
 https://jirochanf.github.io/kinga/3dchair.html

マーカーなしでyoutube動画を再生
 https://jirochanf.github.io/kinga/videoyou.html