「AR.js」でオリジナルのマーカーを設定する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

最近、AR.jsに関するあれこれを記事にしていました。これを誰かへのプレゼントにうまく使えないかなあといろいろ調べていたのですが、その中でオリジナルのマーカー設定ができたら素敵だなと思ったので、今回はその方法をまとめてみました。 オリジナルのマーカーの作成 作成自体は非常に簡単。ジェネレーターサイトが用意されています。 AR.js Marker Training このサイトを使って、「AR.js」で認識するためのの『マーカー画像』と『.patt』ファイルを生成します。その『.patt』ファイルをWebサーバーにアップロードし、ソースコードを読み込むように埋め込んでいくという手順です。 まずは、ファイルをジェネレーターで用意します。 アクセスするとこのようなサイトが表示されます。 その中の、左上の『UPLOAD』のボタンをクリックするとファイルを選択できます。好きな画像をアップロードしてみま