Display interactive 3D models in Web/AR

#javascript #webdev #augmentedreality #tutorial

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:

Start with an index.html file.
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 🙂

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE