1. Create your marker image
One of the limitations of using AR.js is that you have to use a marker image.
They work kinda like a QR code, you scan the marker image and the web application will display the 3D model on top of it. It is possible to customize the marker image though by uploading an image of your choice to the marker training website.
My experience during this week is that is it’s best to use simple, monochrome images such as logos or letters as it makes it easier to detect; in this instance, I used the 3 Sided Cube logo.
2. Design your model
I’d recommend keeping this simple for your first attempt and stick to the <a-box> shown in the sample code. You can customize it by changing things such as the colour and opacity.
Once you have got to grips with implementing AR, you can come back and change this model. You could do this by either downloading a pre-made model from a website such as Sketchfab or if you are feeling creative, try creating your own 3D model.
3. Implement your project
It is surprisingly simple to get the example code up and running. You just to include the libraries and add the sample code.
Here are the scripts that you will need to include:
Here is an example code that will use the default marker image to display a pink cube:
<a-scene embedded arjs=’sourceType: webcam; debugUIEnabled: false;’>
<a-box position=’0 1 0′ material=’opacity: 0.5; color: #F70087;’></a-box>
If you have chosen to use a custom marker, you will need to edit the above code a bit so that it is using a custom preset rather than the hiro one, give it a type of pattern and add a URL with points to the marker .patt file created above, like so…
<a-marker preset=’custom’ type=’pattern’ url=’/PATH/TO/YOUR/MARKER.patt’>
One thing to bear in mind is that the <a-scene> code must be added straight after the body tag – it will not work if it is added inside any other elements such as a <div>.
4. Try it out!
This works best over https, so you will either need to use a service like ngrok to create a tunnel to test your local code, deploy your code somewhere or even use CodePen. When you look at the frontend, it should access your camera. If you point the camera at the marker image, it should display the cube.