Because we are displaying our models in the browser, the supported format is GL Transmission Format (glTF) 2.0/glb, a format that's designed to minimize the size and runtime processing, making it the best option for web transmission. Nowadays, many 3D designing programs such as Blender, 3ds Max, and Maya, as well as some 3D model platforms, such as Sketchfab, provide exporters to this format.

The 3D models' textures can be in .jpg or .png format, the tool supports animations, and, because models are going to be displayed via a web browser, they should not be very heavy on keeping the AR experience fluid.

For this project, we are going to use three static models called gearbox_conical.glb, gearbox_planetary.glb, and gearbox_worm.glb. These models provide good detail for a more realistic AR experience, and we are going to use them in the project in the next section with Augmented Class!.

Now that we have understood the basics of how the <model-viewer> Component works, let's start creating a web page.