Search code examples
augmented-realityar.js

How to insert object without using any marker in ar.js


Is it possible to add object on the floor(or any surface) without using marker in ar.js?

I wonder if there is a tool to detect the floor and then I can trigger an object to it! So far it is possible using a marker image like this:

<!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>

Solution

  • Simple answer: No, AR.js is strictly for marker based AR. The location of the marker is how AR.js finds out where the "plane" is that it can use to put stuff on, and the size of the marker defines how big stuff should be shown (try to show the marker in a website, then zoom in and out to see your objects change size).

    A bit more complicated answer: But there were a few experiments with Tango devices from Google (now called ARCore I think) some time ago, that gave AR.js some information about the floor and other surfaces. You can still find parts of that in the repository of AR.js.

    There is a commercial product, "8thwall web" (I have no relationship to them besides that I have tested their product myself.), that offers web based surface detection. But it only uses Aframe directly, and not AR.js - so I am not sure if that is what you are looking for. But surely worth a look.