⏰ Display 3D models on the web in 1 minute

In this article, I will write a short summary of an impressive web component for model viewing, model-viewer

The model-viewer library makes it easy to display and interact with a 3D model file as easily as writing HTML tags.

As easy as writing HTML

Code:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<model-viewer 
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  auto-rotate
  camera-controls>
</model-viewer>

Result:

We can drag around and zoom in, as we would in any 3D model viewer, and all it took was an HTML tag and 2 scripts.

Models

You can find list of .glb models here

That's it!

If you were wondering how to display your model, no need to read further, but if you wish to, I will write a bit more about the library.

About the library

model-viewer web component is being developed by Google, and it has been introduced in early 2019. Right now they're announcing version 1.1.

The idea of model-viewer is to provide developers with the ability to incorporate 3D and AR technologies for their users without extensive knowledge about related technologies, and with the "as easy as writing HTML" quote, they're more than just on the right path on doing that!

Augumented reality

And yes, you read that right, you can also use this as an augmented reality module. You can read more about that (and find a coded example) here

APIs

Other than just displaying the model, model-viewer offers great APIs like loading, AR, Staging & Cameras, Annotations, Animation, and Scene Graph

Model Editor

They've also introduced a model editor, which you can check out here

Conclusion

Web technologies are rapidly improving, with limits being pushed every single day. Yesterday's impossible ideas are now a reality, and we can all be thankful that open-source folks are doing us a great favor by providing these technologies free for everyone's use.