How do I create a hit-test to place my AR experience?

When creating an AR experience, it is important to be able to properly place and navigate the experience. By implementing a hit-test, users are able to select places on the ground or wall via a circular placement guide. For our own AR purposes, we used P5.JS to create out hit-test With A-Frame, they have their own ar-hit-test, which can be found here .

There are two different ways to perform a hit-test, which depends on your AR experience. The following is broken into two categories: 3D/Object vs 2D/Planes AR experiences.

Here is a working example of an object hit-test .

For 3D/Object Hit-Test

The first thing you need to do in your Glitch page is to create two js files. Name them: ar-object.js and hit-test.js.

You should also create a css file named: main.css

In the main.css file, add the following:

Syntax for script for the css page

Now go back and insert the code for ar-object.js and hit-test.js

(note: this is not the same hit-test code as the one for the plane ar hit-test)

In your index.html file...

Create an entity with a glb-model component, set the model_url and scale values Place this line of code in the a-scene section of the body.

It should look something like this...

screenshot of format for where to place entity for glb

Once working...

If your hit-test is working right, you should first see a black load screen with an AR Button.

The button will take you into an AR mode. By scanning the room with your device, you should see a white ellipse that will attach itself to the wall or ground.

When you find a position you like, press on the ellipse and the AR will map onto it.

Finding the Reticle for the Hit-Test

Lines 84-90 make the reticle. On line 85, it creates the circle. While line 86 defines the mesh.