DEV Community

Cover image for Display interactive 3D models in Web/AR
Aniket Chauhan
Aniket Chauhan

Posted on

Display interactive 3D models in Web/AR

Easily display your 3D elements on Web or in AR.

Prerequisites: You must be aware of the basics of HTML, CSS and JavaScript(ES6).

Approach:

  1. Start with an index.html file.
  2. Then we have to add <model-viewer> tag and script link in <script> tag as shown in example.

Here <model-viewer> is not default tag. It imported from script with type module not text.

Example:
It uses glTF & GLB extension models for rendering. You can zoom and rotate it.

Check out <model-viewer website for more information.

Try out your glTF & GLB models with <model-viewer> Editor.

Browser Support: <model-viewer> is supported on the last two major versions of all evergreen desktop and mobile browsers, plus the last two versions of Safari (on MacOS and iOS).

Comment below if you have any query or suggestion. I hope you’ll find this helpful, Thanks for reading 🙂

Discussion (0)