A-Frame tap to place

Question

Working with a-frame, can not find a way to create something similar to 8thWall´s Cursor Place Ground. I know a-frame can support markerless AR, but I haven't been able to do it, so if anyone knows of any tutorials or hints on how to do markerless AR that would be great. Thanks.

Answer 1

You can use the WebXRHitTest API which is encapsulated in the ar-hit-test component.

With a setup like this:

<a-scene ar-hit-test="target:#my-objects;type:footprint;footprintDepth:0.2;">
   <a-entity id="my-objects">
      <a-box></a-box>
   </a-entity>
</a-scene>

You can place the #my-objects entity by tapping on the floor - provided the surface was detected.

To provide some feedback, you can listen on the scene for these events:

• ar-hit-test-start - when the system has started the scanning process
• ar-hit-test-achieved - when the surface was found
• ar-hit-test-select when the user tapped the screen to place an "anchor" with the items.

---

Resources:

• Ada Rose Cannon tutorial - a must since she created the component
• Her rollAR coaster creation app based on ar tapping
• My 'tap to move'... experiment? tweet with video (ugly source code)