To see the models in AR, you need to open the web page with an ARCore-supporting device. Once you have one, the steps to visualize the model are as follows:
- Get the URL to your final page by clicking on the Share button in the top-left corner of the Glitch web page and selecting Live App.
- Now, copy the URL and paste it into your mobile device. You should see the 3D models loading (it might take a little more time than it would on a computer since they are detailed models):
- In the bottom-right corner of each model, you will see a little box that doesn't appear in the computer's browser. Click on it.
- The first time you do this, a message will appear, asking if the page can open Google Play Services for AR, and if you don't have it installed, it will ask you to install it:
-
Now, you will see the 3D model in fullscreen, along with a button at the bottom to View in your space (AR). Click on it to launch the camera and point it at a flat surface:
- Once the model has been fixed to a surface, we can move around it. By touching the screen, you can move, rotate, and scale it:
- Now, you can play with the size and position of the model to view it from different angles and to move inside it.
And that's it. Now, you know how to display models in AR using the Web Component <model-viewer> and ARCore.
As we mentioned previously, the Component is quite new and constantly changing. To see the latest features and accepted properties, you can take a look at https://googlewebcomponents.github.io/model-viewer/ and https://github.com/GoogleWebComponents/model-viewer.
In the next section, we will create another training project using the same 3D models but with the Augmented Class! tool instead. We will use an image marker and add interaction to our final project.