未分類 – ページ 6 – シニア旅日記

玄関タイル補修

投稿日2022年2月18日2022年2月18日

玄関の上がり口のタイルが剥がれてきた。最初は、１枚だけ。次に２枚。そのうち、接着剤で付けようと思っていたら３枚になった。こりゃだめだということで、ダイキで速乾セメントを購入し、本格的に補修することに。

下地を整えようと隣のタイルを触ると、すぐに剥がれた。と、思うと結局、１２枚補修することに。多少、歪み（沈み）が出てしまったが、ま、いいか。

クリッカブルマップの研究

投稿日2022年2月17日2022年2月17日

画像の任意の位置をクリックするとイベントが発生・日本地図の特定の箇所をクリックするとその県の情報が表示されるようなクリッカブルマップを作ってみました。

https://netken.info/vr/map.html

作成にあたっては、
https://haniwaman.com/map-area/#index_id0

や

https://yuntu-tek.com/clickable-map/
を参考にさせてもらいました。
ただ、VR画面上にこれを表示するのに苦労しましたがなんとか完成しました。

https://netken.info/vr/vr.html

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