Search code examples
javascriptaframear.js

How to create custom marker in Ar.js?

I Was wondering how things work in Ar.js , But i was stuck with creating custom Markers and custom shapes , is there any way to customize things.

this is What i have got things to getting started.

<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs>
    <!-- create your content here. just a box for now -->
    <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
    <!-- define a camera which will move according to the marker position -->
    <a-marker-camera preset='hiro'></a-marker-camera>
  </a-scene>
</body>

This is simple example for getting started

Solution

  • You will need to create & specify a custom pattern file. See Is it possible to use bespoke markers?

    You should also remove the hiro preset.