【Wedding×IT】(ぱーと2)お返しAR~ARマーカーの使い方編~

Wedding×IT

はじめに

Wedding ITとは

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

今回は,お返しの封筒にARマーカーを付与してみたいので,試しにARマーカーの使い方を学んでいきます.

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

必要なもの

  • Glitch
    (前回のファイル)
  • A-Frame

いざ実践

コード

<!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="hiro">
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

ざっくり解説

a-markerでマーカーの種類を選択できます.今回はこちらのデフォルトの画像を使います.

表示するオブジェクトはa-markerの内部に表記します.
今回は前回使用したa-sphereを使います.

こいつです.

file

コードをこんな感じにコピペします.

file

あとは,共有ボタンからURLを取得して

file

スマホからマーカーを見ると....こんな感じに赤い球体が浮いています.

file

おわりに

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

コメント

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