3

I'm trying to use a custom marker for AR.JS. However after following the directions to create a custom marker and then change the marker presets, it still doesn't work. Any ideas on how to properly implement?

<a-marker preset="custom" type="pattern" url="img/pattern-marker.patt">
   <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box>
 </a-marker>

Is this not correct implementation in the marker? For reference, I used a very simple b/w circular image to test and it still did not work. Is there some other code that needs to be written to register a custom marker pattern?

Peter Lum
  • 143
  • 4
  • 13
  • Possible duplicate of [Is it possible to use bespoke markers?](https://stackoverflow.com/questions/45820170/is-it-possible-to-use-bespoke-markers) – Piotr Adam Milewski Apr 27 '18 at 15:00

1 Answers1

2

I've spent ages on this! Finally figured out it is a couple of problems.

1. preset="pattern"

Firstly, if you look at the raw js script: https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js, you'll notice there is no preset="custom" in the else if. For example, search else if( _this.data.preset === 'kanji' ){.

There is however a preset="pattern". So in your example, replace:

<a-marker preset="custom" type="pattern" url="img/pattern-marker.patt"> <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box> </a-marker>

with

<a-marker preset="pattern" type="pattern" url="img/pattern-marker.patt"> <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box> </a-marker>

2. Upload .patt to your GitHub so it can resolve the file

Secondly, my .patt wasn't being picked up locally, so url="img/pattern-marker.patt" won't work. Push this .patt file up to GitHub and then reference it using the raw.githubusercontent.

Example

You can test this using my pattern. https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt.

The image of the marker is below: https://github.com/lbelfield/augmented-reality/blob/master/src/components/trainTicket/train-ticket.png

React-Web-AR: This won't be applicable for you, but if anyone is using React-Web-AR like myself, use this:

<Marker parameters={{ preset: 'pattern', type: 'pattern', patternUrl: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt', url: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt' }}>

Belfield
  • 1,399
  • 1
  • 12
  • 18
  • Has this worked out for you? I tried creating markers based on business cards and it didnt work. Even if you tried "scanning" the physical train ticket, it wont work because it is looking for the border. – oninross Aug 04 '18 at 23:14