Adding the <model-viewer> Component is quite straightforward. Follow these steps to do so:
- First of all, we have to add the following two lines at the end of the <body> element:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
With these lines, we are adding the module to our page and making it work in new and old browsers.
If you want to work with a specific version of the module, add the version number on the URL after model-viewer, like this: /[email protected]/.
- Then, we can call it inside the box class, after the h2 title and before the cc class, making reference to the models' URLs (put your own model's URL in the src attribute):
<model-viewer src="https://cdn.glitch.com/6f8eb042-0e74-4182-9d39-4f877746edb1%2Fgerabox_planetary.glb?v=1566506940560" alt="Planetary Gearbox" background-color="#42697b" auto-rotate camera-controls ar></model-viewer>
The code interface can be seen in the following screenshot:
Final code for the <model-viewer>
As you can see, the <model-viewer> tag supports several attributes:
- The src, background-color, and alt attributes define the source URL, the color of the background, and the description, respectively.
- The auto-rotate attribute will have the model rotating by default on the web page (flat view, not in AR).
- With camera-controls, we can rotate/scale the model while it's in a flat view.
- The really important attribute for us here is ar; without it, the option of seeing the model in AR will not be available.
- Do the same with the other two models:
...
<model-viewer src="https://cdn.glitch.com/6f8eb042-0e74-4182-9d39-4f877746edb1%2Fgearbox_worm.glb?v=1566506941410" alt="Worm Gearbox" background-color="#42697b" auto-rotate camera-controls ar></model-viewer>
...
<model-viewer src="https://cdn.glitch.com/6f8eb042-0e74-4182-9d39-4f877746edb1%2Fgearbox_conical.glb?v=1566506963689" alt="Conical Gearbox" background-color="#42697b" auto-rotate camera-controls ar></model-viewer>
- With this, you should see the three models loaded and rotating on the web page:
The web page with the 3D models in the display
We have finished coding. Now, let's take our mobile phone or tablet and see the models in AR.