オリジナルマーカーでARの表示を行いたいが認識されません

github pagesを利用しWebARを試してみようとしています。
サンプルであるhiroマーカーでなく、オリジナルのマーカーを作成し、下記index.htmlと同じ階層にpattern-logo.pattを設置。読み込ませるようにコードを修正しましたが一向に読み込む気配がありません。
マーカーの作成はAR.js Marker Trainingを使用しました。

HTML
1<!doctype HTML>
2<html>
3<!-- A-Frame ライブラリの読み込み -->
4<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
5<!-- AR.js ライブラリの読み込み -->
6<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
7<body style='margin : 0px; overflow: hidden;'>
8<a-scene embedded arjs="debugUIEnabled:false;trackingMethod:best;" vr-mode-ui="enabled: false">
9    <a-assets>
10        <a-asset-item id="SB-obj" src="obj/Dolphin.obj"></a-asset-item>
11        <a-asset-item id="SB-mtl" src="obj/Dolphin.mtl"></a-asset-item>
12    </a-assets>
13    <a-marker type='pattern' url='pattern-logo.patt'>
14        <a-obj-model id="SB" src="#SB-obj" mtl="#SB-mtl" position="0 0 0" scale="0.1 0.1 0.1" rotation="0 80 0"></a-obj-model>
15        <a-text value="Thank you for coming" position="0 1 0" align="center"></a-text>
16    </a-marker>
17    <a-entity camera></a-entity>
18</a-scene>
19</body>
20</html>

行動規範の内容に同意します

回答1件

ベストアンサー

※A-Frameは詳しくないので、申し訳ないですが以下で解決しない場合は回答スルーしてください。

以下の場合にカスタムマーカーが正常に読み取れないことがある様です。
（モデルとカスタムマーカーはこちらで用意したものを使いましたが、以下を改善したらマーカー認識は行えました）

AR.jsのバージョンが1.5.5以下の場合
カスタムマーカー生成時に、背景透過のPNG画像をアップしている

具体的な改善策
・画像マーカー生成時は、背景透過以外のファイルを利用する
・以下の処理を修正する（"+"記号が付いている箇所が修正部分）

diff
1<!doctype HTML>
2<html>
3- <!-- A-Frame ライブラリの読み込み -->
4- <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
5- <!-- AR.js ライブラリの読み込み -->
6- <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
7
8+ <!-- 利用するライブラリのバージョンを更新 -->
9+ <!-- A-Frame ライブラリの読み込み -->
10+ <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
11+ <!-- AR.js ライブラリの読み込み -->
12+ <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
13
14<body style='margin : 0px; overflow: hidden;'>
15<a-scene embedded arjs="debugUIEnabled:false;trackingMethod:best;" vr-mode-ui="enabled: false">
16    <a-assets>
17        <a-asset-item id="SB-obj" src="obj/Dolphin.obj"></a-asset-item>
18        <a-asset-item id="SB-mtl" src="obj/Dolphin.mtl"></a-asset-item>
19    </a-assets>
20-    <a-marker type='pattern' url='pattern-logo.patt'>
21+    <!-- "preset"属性追加 -->
22+    <a-marker preset="custom" type="pattern" url='pattern-logo.patt'>
23        <a-obj-model id="SB" src="#SB-obj" mtl="#SB-mtl" position="0 0 0" scale="0.1 0.1 0.1" rotation="0 80 0"></a-obj-model>
24        <a-text value="Thank you for coming" position="0 1 0" align="center"></a-text>
25    </a-marker>
26    <a-entity camera></a-entity>
27</a-scene>
28</body>
29</html>