WebARまとめ

投稿日投稿者jiro@fコメントをどうぞ

ここ数日で一通りのことを理解し、出来るようになりました。
・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>

コメントを残す