Is it possible to use custom markers?

Is it possible to use bespoke markers that do not resemble the "Hiro" marker like below. Could I potentially use a random shape (a solid red oval for example) as a marker?

If this is not currently supported, could someone point me into the right direction to where I might start building this functionality?

enter image description here



AR.js supports custom markers. Make any silly image with the marker generator.

Let ar.js know that you want to use your marker:

<a-marker type="pattern" url="patterns/mypattern.patt">
      <a-entity myobject></a-entity>

and voila. You can check it out in this glitch using this image.


1. preset="pattern"

Firstly, if you look at the raw js script:, you'll notice there is no preset="custom" in the else if. For example, search else if( === 'kanji' ){.

There is however a preset="pattern". So ignore the documentation and set preset="pattern" For example:

<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" may not work. Push this .patt file up to GitHub and then reference it using the raw.githubusercontent.


You can test this using my pattern.

The image of the marker is below:

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: '', url: '' }}>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.