Model-viewer: Web 3D made easy

Display interactive 3D models in a browser with augmented reality, AR, using no or minimal code

Model-viewer is a web component created by Google. It makes displaying user interact-able 3D models on a web page a walk in the park. In this course I show you

What you’ll learn

  • Easily display 3D models on a website.
  • Easily add multi-platform AR experiences with the 3D models.
  • Learn how to source, edit and export 3D model files to work with model-viewer.
  • Learn the complete model-viewer API.

Course Content

  • Introduction –> 3 lectures • 19min.
  • Examples –> 7 lectures • 37min.
  • Blender –> 3 lectures • 23min.
  • Model-viewer API –> 7 lectures • 39min.
  • Conclusion –> 2 lectures • 2min.

Model-viewer: Web 3D made easy

Requirements

Model-viewer is a web component created by Google. It makes displaying user interact-able 3D models on a web page a walk in the park. In this course I show you

 

  • How to source 3D assets online free or at low cost.
  • How to use the free 3D modelling program Blender to prepare the assets to work with model-viewer
  • How to use the online model-viewer editor to create a 3D web app
  • How to add augmented reality (AR) experiences to the page.
  • How to use pre-set model positions to direct a user to a product’s key features
  • How to setup a template for a shop featuring 3D displays of products for sale
  • A guide to the model-viewer API for more advanced developers

The course is aimed at Front-End developers with some HTML experience wanting to use the simplest and most robust Web Component to display 3D content on a web page. No programming experience is assumed.

Working with real-time 3D is fun and playing with AR is fascinating. You’ll be amazed at how much can be done with minimal HTML mark-up.

As usual there is a 30-day money back guarantee, so you have nothing to lose.

The course includes some useful examples that could form the starting templates for your own pages.

Time to bring your webpages into the 3rd dimension.

Get Tutorial