Search code examples
javascripthtmlaugmented-realityaframear.js

A-Frame AR.js app isn't recognizing my marker pattern, and also a black overlay upon loading the page

Here is the link: https://sixteendollars.github.io/

As you can see, upon clicking the link, there's a weird black overlay on the page.

In addition, upon pointing the camera at my marker image (https://i.sstatic.net/1vCPx.png), it's not recognizing the marker and popping up the A-Frame entity like expected. I'm not sure if this is a problem with the marker, the model, the way I'm accessing the assets pipeline, or what.

The HTML:

<!DOCTYPE html>
<html>

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>

<body style="margin : 0px; overflow: hidden;">

<a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false;">


    <a-marker type="pattern" url="assets/pattern-marker.patt">
        <a-entity             
        obj-model= "obj: url(assets/Batman.obj);
        mtl: url(assets/Batman.mtl)">></a-entity>
     </a-marker>
     <a-camera-static/>

</a-scene>

</body>

</html>

The directory structure:

assets
    pattern-marker.patt
    Batman.obj
    Batman.mtl
index.html
Solution

  • I threw your code into this codepen, and it's working properly. A couple of issues though.

    1) Always make sure how the scene behaves without ar.js

    The model is huge (you need to scale it down like a hundred times), and the 'mtl's are not working properly. You can see it in this fiddle.

    You can either scale it down with blender / maya, or with the scale component:

    <a-entity scale='0.1 0.1 0.1'></a-entity>

    2) The 'overlay' is actually your model. <a-marker-camera> should be used as a point of view for the scene. If you want to place AR stuff on the marker, use <a-marker>:

     <a-marker type="pattern" url="assets/pattern-marker.patt">
    <a-entity all-my-models></a-entity>
 </a-marker>
 <a-camera-static/>

    With the <a-camera-static> being the equivalent of a camera (source)

    When the marker dissapears, the <a-marker-camera> makes sure, that the rendered models stay on the screen. So you see an initial position of the loaded model.

    Pics or didn't happen
    When you scale the model down, and put it inside a <a-marker>, you should see the models (the right one is without the mtls)

    enter image description here

    UPDATE

    This is quite question specific, so i'm placing it separately.

    1) MTL's. These console errors show, that you didn't upload some necessary files enter image description here

    2) Github pages. It takes a while to load on my laptop but its clearly there. Tried on firefox / chrome on windows. enter image description here