【Wedding×IT】(ぱーと3)お返しAR~自作ARマーカー作り方編~

Wedding×IT

はじめに

Wedding ITとは

【Wedding×IT】(ぱーと1)お返しAR~Glitchの使い方編~
今回は,お返しの封筒にARマーカーを付与してみたいので,試しにGlitchの使い方を学んでいきます. ちなみに無料で実践できます.

お返しの封筒にARマーカーを付与してみたいので必要な技術を習得中です.

前回は,GlitchやARマーカーの使い方を学んでいました.

【Wedding×IT】(ぱーと1)お返しAR~Glitchの使い方編~
今回は,お返しの封筒にARマーカーを付与してみたいので,試しにGlitchの使い方を学んでいきます. ちなみに無料で実践できます.
【Wedding×IT】(ぱーと2)お返しAR~ARマーカーの使い方編~
はじめにWedding ITとは今回は,お返しの封筒にARマーカーを付与してみたいので,試しにARマーカーの使い方を学んでいきます.ちなみに無料で実践できます.必要なものGlitch(前回のファイル)A-Frameい...

今回は,それらの知識を活かして,自作ARマーカー作り方をやっていこうと思います.

ちなみに無料で実践できます.

必要なもの

  • Glitch
    (前回のファイル)
  • AR.js

自作マーカーの作り方

マーカーを作成します.今回はinkscapeで作成して,PNGで保存しました.

file

これをAR.jsにアップロードしてから,

file

ダウンロードボタンから,2つのファイルを取得します.

file

こんな感じで,2つのファイルが取得できます.

file

自作マーカーを使ってみる

Glitchを開いて,アップロードボタンを押します.次に,すべてのファイルを選択してから,「patt」ファイルを選択します.

file

また,アセットフォルダから,「patt」ファイルのURLをメモしておきます.

file

最後に,index.htmlを下記のようにすることで,アップロードした画像と紐づきます.

file

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="custom" type="pattern" url="https://cdn.glitch.global/d60e8219-715c-4d35-9124-42984f6c1f3d/pattern-ar_marker5.patt?v=1664723363752">
        <a-sphere position="0 0 0" radius="1.25" color="#EF2D5E"></a-sphere>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

a-markerurlはアップロードした「patt」ファイルのURLに変更しておいてください.
あとは,スマホで見ることで無事に球が見ることができました.

file

おわりに

次回は,自作モデルを使ってやっていきます.

コメント

タイトルとURLをコピーしました