Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@mininobu

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

More than 3 years have 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は日本語の情報が少ないので、今後利用を検討されている方の参考になれば幸いです。

9
Help us understand the problem. What is going on with this article?
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
mininobu
ulsystems_inc
東京都中央区晴海に本拠を置くITコンサルティング会社です。技術的な知見に基づいて技術案件から上流案件まで幅広くご支援しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?