Adding 3D models to a website is tricky. 3D models ideally will be shown in a viewer that can work responsively on all browsers including smartphones, desktop, or even new head-mounted displays. The viewer should support progressive enhancement for performance and rendering quality. It should support use cases on all devices ranging from older, lower-powered smartphones to newer devices that support augmented reality. It should stay up to date with current technologies. It should be performant and accessible. However, building such a viewer requires specialty 3D programming skills, and can be a challenge for web developers that want to host their own models instead of using a third-party hosting service.

To help with that, the <model-viewer> web component, which just released version 1.1, lets you declaratively add a 3D model to a web page, while hosting the model on your own site. The web component supports responsive design and use cases like augmented reality on some devices, and it includes features for accessibility, rendering quality, and interactivity. The goal of the component is to enable adding 3D models to your website without understanding the underlying technology and platforms.

#web