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

2 comments

@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>
</a-marker>

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 github.com/jeromeetienne/AR.js/issues/…. 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: 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 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.

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

@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