By Anthony Budd

2017-08-22 14:17:53 8 Comments

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


@Piotr Adam Milewski 2017-08-22 17:19:31

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.

@Blinxen 2018-02-13 13:04:16

Is this still up to date? because it doesn't seem to work for me.

@Piotr Adam Milewski 2018-02-13 13:07:23

@Blinxen last time i checked, there was a bug in ar.js, and found a solution here…. I'll add it to the anwser

@Piotr Adam Milewski 2018-02-13 13:21:10

@Blinxen updated, please let me know if it worked

@Blinxen 2018-02-13 15:22:11

I cloned the ar.js master branch and made the changes to the file, but when I open the html, I get a refference error for both file on some random lines. It just showes a blank page.

@Piotr Adam Milewski 2018-02-13 15:22:43

@Blinxen i'll try it out in ~3h

@Blinxen 2018-02-13 15:23:25

Ok, but please clone the master branch, so we have the same git repo and try it. Thank you.

@Piotr Adam Milewski 2018-02-13 22:01:05

@Blinxen i've been trying to make it work, check out my update

@Belfield 2018-06-02 19:47:19

@Blinxen: see my answer below.

@Belfield 2018-06-02 19:46:47

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

@Piotr Adam Milewski 2018-06-03 20:26:55

+1 way more thorough :). Something must have change in the recent build, since it works just like i described it in the very beginning ( You don't need the preset="pattern" )

Related Questions

Sponsored Content

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

1 Answered Questions

[SOLVED] Why is raycast direction calculated incorrectly in WebXR?

1 Answered Questions

Attaching the same onClick event to Google Map markers

2 Answered Questions

1 Answered Questions

[SOLVED] how to select markers in the polygon from mysql

2 Answered Questions

[SOLVED] How to split a tree on all possible subtrees?

0 Answered Questions

Select multiple markers with a mouse click drag box

2 Answered Questions

[SOLVED] Three.js ray picking face segments of plane / mesh v69

1 Answered Questions

[SOLVED] Toggle Map Markers

1 Answered Questions

[SOLVED] Custom Google Map Icon If Value >=1

Sponsored Content