How do I use Custom Marker with ar.js

Question

I am trying to make a custom marker work in ar.js, sadly with no succes, was hoping somebody could help.

I have tried all of those guides: https://medium.com/@aschmelyun/so-you-want-to-get-started-with-ar-js-41dd4fba5f81 https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105 https://katharine.org/tutorials/custom-markers-ar-js/

Sadly it does not seem to work. weirdly enough, with the hiro Marker it still worked, eventhough the code doesn't mention it... (I tried editing the .js file for the katherine-tutorial only).

<!doctype HTML>
<html>
  <script src="aframe.min.js"></script>            
  <script src="aframe-ar.js"></script>            
<script src="aframe-gif-shader.js"></script>   

  <body style="margin : 0px; overflow: hidden;">    
    <a-scene embedded arjs="debugUIEnabled: false">  
      <a-assets> 
        <img id="asset" src="https://raw.githubusercontent.com/mayognaise/aframe-gif-shader/master/examples/basic/banana.gif">
      </a-assets>
      <a-marker preset='custom' type="pattern" url='testpattern.patt'> 
      <a-entity geometry="primitive:plane;width:2;height:2;"
      position="0 0 0"
      rotation="-90 0 0"
      scale="0.5 0.5 0.5"
      material="shader:gif;src:#asset;alphaTest:0.5;"></a-entity>
    </a-marker>
    <a-entity camera></a-entity>    
    </a-scene>
  </body>
</html>

(Also I have a problem with, when i upload the same exact gif on my own webspace, the gif doesnt work anymore with that code, anyone knows why?)

Possible duplicate of [Is it possible to use custom markers?](https://stackoverflow.com/questions/45820170/is-it-possible-to-use-custom-markers) — Piotr Adam Milewski, Sep 18 '19 at 18:52
you could link a glitch, i believe if you lose the `preset=custom` attribute it should work if the urls are correct. — Piotr Adam Milewski, Sep 18 '19 at 18:59

score 2 · Accepted Answer · answered Sep 18 '19 at 19:03

2

Custom markers in ar.js require only to have the type and an url set:

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

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

answered Sep 18 '19 at 19:03

Piotr Adam Milewski

14,150
3
21
42

Hey, sorry didn't have time to check it out until now. Taking your code works. Modifying my code with the url to your Pattern works too. But when I try to download the pattern and upload it to googledrive or a webspace and link it, it breaks. Is there a certain way how to upload patterns or do you have any other idea why that is the case? – Kreisball Sep 23 '19 at 08:10
Uploading the pattern to github pages and using that Link seems to work. But I can not think of what is wrong with the webspace, that uploading it there does not work. Anyways custom marker works. Thanks a lot! – Kreisball Sep 23 '19 at 08:56

How do I use Custom Marker with ar.js

1 Answers1