Help us understand the problem. What is going on with this article?

AR.jsでカスタムマーカーが認識されない場合の対処法

More than 1 year has passed since last update.

はじめに

AR.jsでカスタムマーカーを使おうとしてハマったので備忘録もかねて残しておきます。

症状

A-Frameのmarker generatorで作成したカスタムマーカーをAR.jsが認識しない。

考えられる原因と対処法

参照しているライブラリが古い可能性がある

カスタムマーカーはバージョン1.5.5以降に追加された機能です。CDNで公開されているライブラリを参照している場合、バージョン1.5.5以降のライブラリ、またはgithubの最新のコードを参照しているか確認してください。

ちなみに、npmに公開されているAR.jsはバージョンが古いため(おそらく1.5.0)、モジュールの入れ替えが必要です。

タグ/属性が誤っている可能性がある

18/4/17時点の公式サイトにて、カスタムマーカーの使用法は下記のように説明されています。

<a-marker-camera type='pattern' patternUrl='path/to/pattern-marker.patt'></a-marker-camera>

上記コードでは、patternUrl属性にカスタムマーカーのパターンファイルを参照させることでカスタムマーカーを認識させる、というものですが、正しくはurl属性に指定する必要があります。
また、認識しないことの直接の原因ではありませんが、<a-marker-camera>を使用した場合、カメラがマーカーを外れたときにオブジェクトが消えずに残るという事象が発生します。そのため、<a-marker>を使用するのが正しいです。

修正後のサンプルコード

上記の原因を見直し、下記のように修正した結果、無事にカスタムマーカーを認識することができました。

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"> </script>

~省略~

<a-marker preset="custom" type="pattern" url="pattern-marker.patt"></a-marker>

おわりに

個人的には「ライブラリが古かった」という点でハマりました。
AR.jsは日本語の情報が少ないので、今後利用を検討されている方の参考になれば幸いです。

mininobu
ulsystems_inc
東京都中央区晴海に本拠を置くITコンサルティング会社です。技術的な知見に基づいて技術案件から上流案件まで幅広くご支援しています。
https://www.ulsystems.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした