A-Frameで簡単スマホAR（自作マーカー） | CodeMoguMogu|プログラマーのお食事処

説明
開発環境
自作ARマーカーの作成
HTMLファイルの作成

説明

A-Frameというフレームワークを使って、簡単にスマホARを作成します。
SSL通信できる環境が必要です。

開発環境

・Webサーバ環境（SSL通信できる環境）
・GoogleChrome
・スマホ（Android）
※ローカル環境でお試ししたい場合はこちらを参考にしてください。

自作ARマーカーの作成

①. マーカーの模様を用意

今回は以下の画像を使用します。（※AR TESTという文字が書いてある画像です）

②. AR.js Marker Trainingでマーカーの作成

2-1. AR.js Marker Trainingをアクセス
2-2. 「UPLOAD」ボタンで、先ほどの画像を選択　(※下記画像①)
2-3. 「DOWNLOAD MARKER」と「DOWNLOAD IMAGE」でマーカーを取得します (※下記画像②)
(取得した画像を、pattern-ar-test.patt, pattern-ar-test.pngとします)

HTMLファイルの作成

HTMLファイルの作成します。上記で作った画像も使用します。

<html>
<head>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <meta charset="utf-8">
  <title>ARデモ</title>
</head>
<body>
  <a-scene embedded arjs="debugUIEnabled:false;">
    <!-- カメラ -->
    <a-entity camera></a-entity>
    <!-- マーカーと表示したいオブジェクト -->
    <a-marker preset="custom" type="pattern" url='./pattern-ar-test.patt'>
      <a-box position="0 0.5 0" color="#FFFF00" scale="0.5 0.5 0.5"></a-box>
    </a-marker>
  </a-scene>
</body>
</html>

※a-markerのurl=”のパスの位置注意してください。

スマホでアクセスして、スマホのカメラをマーカーにかざすと・・。