AR.js: problem with custom marker

Do you want to request a feature or report a bug? bug

UPDATE There is a solution in the last comment.

What is the current behavior? I tried to follow your tutorials on using a custom marker. Since it didn’t work for me I decided to merge the examples from AR.js/aframe/examples/ to check if it is running here with a pattern from your repo. Apparently, it is not.

I even tried to use the same hiro pattern, but with <a-marker-camera> and it still didn’t work.

If the current behavior is a bug, please provide the steps to reproduce. This is the code from marker-camera.html example, but with pattern replaced to pattern-arjs.patt from default-thinner-border.html.

<!DOCTYPE html>
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
	<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - example for a-frame
	<br/>
	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
	<!-- <a-scene embedded arjs='sourceType: image; sourceUrl:../../data/images/armchair.jpg;'> -->
	<a-scene embedded arjs='sourceType: webcam;'>

		<a-sphere position="0 0.5 0" radius="0.5" color="#EF2D5E"></a-sphere>
		<a-plane position="0 0 0" rotation="-90 0 0" width="1" height="1" color="#7BC8A4"></a-plane>

		<a-marker-camera
                type='pattern'
                url='../../three.js/examples/marker-training/examples/pattern-files/pattern-arjs.patt'> </a-marker-camera>
	</a-scene>
</body>
</html>

What is the expected behavior? Sphere displayed when the new pattern (ARJS) on the screen.

Please mention other relevant information such as the browser version, Operating System and Device Name macOS,chrome Version 67.0.3396.79 (Official Build) (64-bit)

Am I missing something?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18

Commits related to this issue

trying fix https://github.com/jeromeetienne/AR.js/issues/366 — committed to ddonnie/ddonnie.github.io by ddonnie 6 years ago

Most upvoted comments

Cool, it works! Thank you again @nicolocarpignoli.

Step by step solution for others:

Use most recent version of aframe-ar.js : https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js
Make sure that your pattern is good (non-transparent background, sharp edges, no colors).
Use a-marker instead of a-marker-camera and include entities inside it as in the following example:

<head>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

  <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best; debugUIEnabled:false'>
        <a-assets>
            <a-asset-item id="tree-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/Tree.dae" crossOrigin="anonymous"></a-asset-item>
            <a-asset-item id="text-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/MerryChristmas.dae" crossOrigin="anonymous"></a-asset-item>
       </a-assets>
        <a-marker preset='custom' type='pattern' url='https://raw.githubusercontent.com/TimVanMourik/Armadillo/master/app/armadillo/static/img/patt/pattern-marker.patt'>
<---display first model     --->
<a-entity collada-model="#tree-model"></a-entity>

         </a-marker>
         <a-entity camera></a-entity>
    </a-scene>
</body>

dokato on Jul 4, 2018

@dokato great!

in order to display COLLADA object, try with this index.html:

<head>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

  <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best; debugUIEnabled:false'>
        <a-assets>
            <a-asset-item id="tree-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/Tree.dae" crossOrigin="anonymous"></a-asset-item>
            <a-asset-item id="text-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/MerryChristmas.dae" crossOrigin="anonymous"></a-asset-item>
       </a-assets>
        <a-marker preset='custom' type='pattern' url='https://raw.githubusercontent.com/TimVanMourik/Armadillo/master/app/armadillo/static/img/patt/pattern-marker.patt'>
<---display first model     --->
<a-entity collada-model="#tree-model"></a-entity>

         </a-marker>
         <a-entity camera></a-entity>
    </a-scene>
</body>

to embed different object model depending on their format, take a look to a-frame doc (i.e. collada models https://github.com/aframevr/aframe/blob/master/docs/components/collada-model.md)

nicolocarpignoli on Jul 3, 2018

Thanks @nicolocarpignoli for a quick reply. Actually, I even tried with Hiro marker with absolute path and it still didn’t work. Do you have any full example, which works for you?

It looks like this one https://github.com/nicolocarpignoli/nicolocarpignoli.github.io/blob/master/ar-playground/index.html uses barcode rather than custom marker.

dokato on Jun 16, 2018