jeromeetienne / AR.js

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

This is not working using multi Barcode markers. #406

Closed spartalisdigital closed 5 years ago

spartalisdigital commented 6 years ago

Do you want to request a feature or report a bug? Yes, I want to report a bug.

What is the current behavior? This is not working using multi Barcode markers.

If the current behavior is a bug, please provide the steps to reproduce. I used the example provided in the documented, but it has only one hiro, one kanji and one Barcode 05.

What is the expected behavior? I would like to insert several barcodes, from 0 to number 9, so you can insert a 3d object for each Barcode marker. I am making cards from the planets of the solar system in augmented reality.

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

<!DOCTYPE html>

nicolocarpignoli commented 6 years ago

Hi, I think you missed the <a-scene/> element that wraps every a-marker and a-entity. Try with this:

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

<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<!-- manipulador de arquivo -->
<a-assets>
  <a-asset-item id="sol-obj" src="/obj/Sun.obj"></a-asset-item>
  <a-asset-item id="mercurio-mtl" src="/obj/Sun.mtl"></a-asset-item>
  <a-asset-item id="mercurio-obj" src="/obj/Mercury.obj"></a-asset-item>
  <a-asset-item id="mercurio-mtl" src="/obj/Mercury.mtl"></a-asset-item>
  <a-asset-item id="Venus-obj" src="/obj/Venus.obj"></a-asset-item>
  <a-asset-item id="Venus-mtl" src="/obj/Venus.mtl"></a-asset-item>
  <a-asset-item id="Terra-obj" src="/obj/Earth.obj"></a-asset-item>
  <a-asset-item id="Terra-mtl" src="/obj/Earth.mtl"></a-asset-item>
  <a-asset-item id="Lua-obj" src="/obj/Moon.obj"></a-asset-item>
  <a-asset-item id="Lua-mtl" src="/obj/Moon.mtl"></a-asset-item>
  <a-asset-item id="Marte-obj" src="/obj/Mars.obj"></a-asset-item>
  <a-asset-item id="Marte-mtl" src="/obj/Mars.mtl"></a-asset-item>
  <a-asset-item id="Jupiter-obj" src="/obj/Jupiter.obj"></a-asset-item>
  <a-asset-item id="Jupiter-mtl" src="/obj/Jupiter.mtl"></a-asset-item>
  <a-asset-item id="Saturno-obj" src="/obj/Saturn.obj"></a-asset-item>
  <a-asset-item id="Saturno-mtl" src="/obj/Saturn.mtl"></a-asset-item>
  <a-asset-item id="Neturno-obj" src="/obj/Neptune.obj"></a-asset-item>
  <a-asset-item id="Neturno-mtl" src="/obj/Neptune.mtl"></a-asset-item>
  <a-asset-item id="Urano-obj" src="/obj/Uranus.obj"></a-asset-item>
  <a-asset-item id="Urano-mtl" src="/obj/Uranus.mtl"></a-asset-item>
  <a-asset-item id="Urano-obj" src="/obj/Pluto.obj"></a-asset-item>
  <a-asset-item id="Urano-mtl" src="/obj/Pluto.mtl"></a-asset-item>
  <!-- Texturas Poly -->
  <img id="texture-sol" src="/textura/1k/Sun.png">
  <img id="texture-mercurio" src="/textura/1k/Mercury.png">
  <img id="texture-venus" src="/textura/1k/Venus.png">
  <img id="texture-terra" src="/textura/1k/Earth.png">
  <img id="texture-lua" src="/textura/1k/Moon.png">
  <img id="texture-marte" src="/textura/1k/Mars.png">
  <img id="texture-jupiter" src="/textura/1k/Jupiter.png">
  <img id="textura-saturno" src="/textura/1k/Saturn.png">
  <img id="texture-neturno" src="/textura/1k/Neptune.png">
  <img id="textura-urano" src="/textura/1k/Uranus.png">
  <img id="textura-plutao" src="/textura/1k/Pluto.png">
</a-assets>

<!-- Sol Poly -->
<a-marker id="Sol" type="barcode" value="0">
  <a-entity obj-model="obj: #Sol-obj;"
            material="src: #textura-sol"
            position="0 0.8 0"
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Mercurio Poly 
<a-marker id="Mercurio" type='barcode' value='1'>
  <a-entity obj-model="obj: #Mercurio-obj;"
            material='src: #texture-mercurio'
            position="0 0.8 0"
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Venus Poly 
<a-marker id="Venus" type='barcode' value='2'>
  <a-entity obj-model="obj: #Venus-obj;"
            material='src: #texture-venus'
            position="0 0.8 0"
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Terra Poly 
<a-marker id="Terra" type='barcode' value='3'>
  <a-entity obj-model="obj: #Terra-obj;"
            material='src: #texture-terra' 
            position="0 0.8 0" 
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Lua Poly 
<a-marker id="Lua" type='barcode' value='4'>
  <a-entity obj-model="obj: #Lua-obj;" 
            material='src: #texture-lua' 
            position="0 0.8 0" 
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Marte Poly 
<a-marker id="Marte" type='barcode' value='5'>
  <a-entity obj-model="obj: #Marte-obj;" 
            material='src: #texture-marte' 
            position="0 0.8 0" 
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Jupiter Poly 
<a-marker id="Jupiter" type='barcode' value='6'>
  <a-entity obj-model="obj: #Jupiter-obj;" 
            material='src: #texture-jupiter' 
            position="0 0.8 0" 
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Saturno Poly 
<a-marker id="Saturno" type='barcode' value='7'>
  <a-entity obj-model="obj: #Saturno-obj;" 
            material='src: #textura-saturno' 
            position="0 0.8 0" 
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Neturno Poly 
<a-marker id="Neturno" type='barcode' value='8'>
  <a-entity obj-model="obj: #Neturno-obj;" 
            material='src: #texture-neturno' 
            position="0 0.8 0" 
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- Urano Poly 
<a-marker id="Urano" type='barcode' value='9'>
  <a-entity obj-model="obj: #Uruno-obj;" 
            material='src: #textura-plutao' 
            position="0 0.8 0" 
            scale="0.05 0.05 0.05"></a-entity>
</a-marker>

<!-- add a simple camera -->
<a-entity camera></a-entity>
</a-scene>
</body>
spartalisdigital commented 6 years ago

is not it. You have the correct tag closures. only the example with the hiro, kanji and barcode 5 that are running. When trying to use the algorithm or just barcode simply does not work.

I'm using Mozilla's thimble online code editor. https://thimble.mozilla.org

mnutsch commented 6 years ago

The AFrame barcode functionality was broken in some later release. An easy way to get using it is to download the version of AR.js (incl. the Aframe library) found here: https://github.com/jeromeetienne/AR.js/archive/e9aea5deb0ee010ece3e2ab07d84b587c374b66b.zip