CODEWITHSUNDEEP
javascripthtmlaugmented-realityaframear.js
Kreisball
Kreisball

Reputation: 41

How do I use Custom Marker with ar.js

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?)

Upvotes: 1

Views: 2985

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

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.

Upvotes: 2

Related Questions