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
<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>
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.
You can find list of
.glb models here
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
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!
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
Other than just displaying the model, model-viewer offers great APIs like loading, AR, Staging & Cameras, Annotations, Animation, and Scene Graph
They've also introduced a model editor, which you can check out here
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.
Top comments (0)