jeromeetienne / AR.js

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

Model ot showing up on new marker. #390

Closed lajunex0 closed 6 years ago

lajunex0 commented 6 years ago

I 'm having an issue adding a pattern to make a new logo

This is what I have so far :

What is the current behavior? The Model does not show up on the marker. If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior? The Model should show up on the marker If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and Device Name

jwebking commented 6 years ago

Hi @lajunex0

Take a look at this previous issue that was solved a few weeks ago and try modeling your code after it, especially the comments after July 1st: https://github.com/jeromeetienne/AR.js/issues/366

A couple starting points add crossOrigin="anonymous" to your asset items so it would look like this: <a-asset-item id="NSLogo7" src="https://raw.githubusercontent.com/lajunex0/3dmodels/master/NSLogo7.gltf" crossOrigin="anonymous"></a-asset-item>

Use <a-marker> instead of <a-marker-camera>, which would look like this: <a-marker preset='custom' type='pattern' url='https://raw.githubusercontent.com/lajunex0/3dmodels/master/patternmarker.patt' >

One thing to note with the custom pattern markers, the white needs to be just off white. I believe the color settings was (255,255,255), a really light off white grey seemed to work the best.

Also, make sure you are calling the most recent AR.js build and A-Frame scripts into your project. These work for me:

  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
  <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
lajunex0 commented 6 years ago

Thanks! I added everything you stated, but it still doesn't work. It does work with the Hiro marker though. I think maybe my marker has too many curves? Do you think this image is okay? : https://github.com/lajunex0/3dmodels/blob/master/marker2.png ..or are there too may curves? I added the off white as you stated. It still does not work.

lajunex0 commented 6 years ago

if it helps, i don't think the model gets loaded in the version without the hiro marker.

jwebking commented 6 years ago

Your marker is good. I'm able to get it working with the following code:

<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> 
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.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>
        <!-- id=“file name“ src=“file url" -->
        <a-asset-item id="NSLogo7" src="https://raw.githubusercontent.com/lajunex0/3dmodels/master/NSLogo7.gltf" crossOrigin="anonymous">
        </a-asset-item>
    </a-assets>

<a-marker  preset='custom' type='pattern'  url='https://raw.githubusercontent.com/lajunex0/3dmodels/master/patternmarker002.patt' >
        <a-box color="red"></a-box>

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

I think it might be related to the gltf model. Sometimes - depending on how they are exported - they may not work. With ones that have animations, I'm pretty sure they have to have the bin file in the assets folder with them, and I think there are more specifics as to how the files need to be exported. Unfortunately I'm not 100% on the specifics. I would try searching Blender, Unity, Vuforia forums to see if others are having similar issues or can touch on how to export the files.

Another option it to use a .dae or collada model. You can also try with .obj models for proof of concept.

nicolocarpignoli commented 6 years ago

https://github.com/aframevr/aframe/tree/master/docs/components for docs for every aframe "component" (in order to embed obj, gltf, COLLADA, etc.)

lajunex0 commented 6 years ago

I only added the animations using the code. They are not baked into the model. I changed the model to .dae and it still isn't working. I went by the steps in the link above. The model was working before I added the custom marker. I am not sure where to make it 'exsist'

lajunex0 commented 6 years ago

Okay! SO I finally go it to work. the gltf is fine. Here is what I am using:

Thanks so much for all the help!!

nicolocarpignoli commented 6 years ago

@lajunex0 you're welcome :) closing as it is solved.