Doc > Tutorials > Product Configurator

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.

newsletter, twitter, forum or discord.

Is this doc helpful/not helpful? Is there any information you would like that is not available? Don't hesitate to get in touch with any question or feedback, either by email, on Discord or the forum.