Doc > Tutorials > Product Configurator

Here is a series of 10 short videos that will show you how to create a WebGL configurator using Polygonjs.

You can also run or clone the project from the github repository.

Part 1: Introduction

Learn how to create a simple WebGL Configurator

Part 2: Basic Setup

This part describes how to create a basic scene in Polygonjs, and how to create HTML form inputs that can modify it.

Part 3: Add CSS

Add some basic CSS to make the page look decent.

Part 4: Light & Shadows

Setup the lighting.

Part 5: Switch Materials

Learn how to assign different materials and how to switch between them.

Part 6: Add a Progress Bar

Learn how to listen to events from the Polygonjs scene, which we'll use to add a loading progress bar.

Part 7: Limit Camera Movements

Learn how to define how the camera can move around the 3Dscene.

Part 8: Improve the HTML form

Learn how we can listen to more events from the scene depending on how the user updates it.

Part 9: Polishing

Let's add some finishing touches to the scene.

Part 10: Conclusion

Recap of what we learned, from creating a 3D scene with Polygonjs and adding simple HTML, CSS and javascript to it.