# Create Stunning 3D Web Pages with Google ModelViewer & Three.js (Step-by-Step Tutorial)

> In this 15-minute tutorial, we’ll dive into a different flavor of Three.js: Google’s ModelViewer. You’ll learn how to set up and configure a 3D motorcycle…

Canonical page: https://andersonmancini.dev/videos/create-stunning-3d-web-pages-with-google-modelviewer-and

Published: 2024-10-09 · Duration: 14:48 · Category: Tutorials · Tags: three.js, tutorial, source-code, modelviewer, webdevelopment, motorcycle

Watch: [YouTube](https://www.youtube.com/watch?v=3QSb5lSh9Kc) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

Links:

• Live Project Demo:

• Download Source Code:

What You’ll Learn:

In this 15-minute tutorial, we’ll dive into a different flavor of Three.js: Google’s ModelViewer. You’ll learn how to set up and configure a 3D motorcycle model, add interactive hotspots, and integrate everything seamlessly into your webpage. We’ll also explore the Google ModelViewer Editor, a powerful tool to easily customize your model with minimal effort. Whether you’re a beginner or an experienced developer, this tutorial will guide you through creating dynamic 3D web content with ease.

Key Topics:

• Exploring a new flavor of Three.js with Google ModelViewer

• Using the Google ModelViewer Editor

## Links from the video

- [arkham-motorsports.glitch.me](https://arkham-motorsports.glitch.me/)
- [Live demo](https://glitch.com/edit/#!/arkham-motorsports)