search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.79k stars 2.22k forks source link

Custom markers not working. #445

Closed trusktr closed 5 years ago

trusktr commented 5 years ago

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

Bug (I think?)

What is the current behavior?

Custom marker doesn't work. I see it in the video, but nothing renders on top.

If the current behavior is a bug, please provide the steps to reproduce.

The following code works perfectly:

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
    <a-marker preset="hiro">
            <a-box position='0 0.5 0' material='color: black;'></a-box>
    </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

But if I try to use my own marker it doesn't work. I am changing the line

    <a-marker preset="hiro">

to

        <a-marker type="pattern" patternUrl="./ar.js.patt">

as described in the article How To Create your Own Marker? on Medium, where ./ar.js.patt is the default marker created from the generator:

marker

I have placed it correctly next to my HTML file, and I'm serving the folder that contains both the HTML file and the .patt file with http-server, just normal stuff.

There's no errors in the console.

Nothing renders on top of the AR.js marker.

What is the expected behavior?

A black cube should render on top of the AR.js marker.

This is what I see:

screenshot nov 28 2018 10_07_26 pm

I'd like to make multiple different custom markers and render different things in the scene.

trusktr commented 5 years ago

I had to change patternUrl to just url, then it worked.

Suggestion: the docs could be a more organized. For example I didn't know there were docs inside the a-frame folder. The main README could contain a "menu" of sorts and link to there. The first search result for "ar.js custom marker" on Google is the outdated article which uses patternUrl.