I'm trying to understand AR:JS but I'm having problems adding a custom marker. I see that a lot of perple have had similar issues but I haven't been able to find a solution that works.
Note that I'm very much a noob when it comes to this, with only rudimentary HTML knowledge (I work in motion desing/3D)
I'm running this example code in Code pen:
<!-- AR.js by @jerome_etienne - github: https://github.com/jeromeetienne/ar.js - info: https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='custom' type='pattern' url='https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/marker-training/examples/pattern-files/pattern-hiro.patt'></a-marker-camera>
</a-scene>
</body>
I'am trying to eliminate any variables, so in this test I'm using Jerome Etiennes own .patt file of the Hiro marker, and I'm still not getting it to work. If I switch to the Hiro preset it works though.
Thankful for any help