How to create custom marker in Ar.js?

javascript aframe ar.js
Gopinath Kaliappan picture Gopinath Kaliappan · Dec 5, 2017 · Viewed 9.4k times · Source

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

Answer

Chamin Wickramarathna picture Chamin Wickramarathna · Mar 12, 2018

You can use the marker generator.

In the marker generator

  • Upload your image .

  • Download the trained marker.

  • Include it in your Code.

The trained marker is contained in a .patt file. This file contains the encoded marker that you should reuse in your code. You specify you want a pattern marker and you provide the URL to your own marker. So just replace this in your code.

<a-marker-camera preset='custom' type='pattern' url='assets/NAME-OF-PATTERN-FILE.patt'></a-marker-camera>

Related questions

How to get click event with javascript from an A-frame element

UPDATE: You can use onclick= function();in the HTML. For example: <a-box onclick="myFunction()"></a-box> I want to get click event of cursor with javascript from an A-frame element, like a box for example, how can …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More