Vizianello Boat Configurator
An interactive 3D configurator designed to guide the customization of Vizianello boats, from materials and finishes to technical options and the final configuration summary.
- Date
- Role & stack
- React • TypeScript • Three.js • 3D Configurator
- Project
- CANTIERI VIZIANELLO
The Vizianello boat configurator is a web application designed to make the configuration of a boat clearer, more visual, and easier to understand. Instead of describing materials, finishes, and options only through words, the client can see them directly on a 3D model, change the available choices, and build a configuration step by step.
In this specific case, the configurator was built around the Vizianello G30, with the goal of supporting product presentation, consultation, and sales in a smoother way.
The idea was to create a tool that was not only visually appealing, but genuinely useful: the person looking at the boat can immediately understand what they are choosing, what changes, and what configuration they are building.
A configurator made for real use
The experience is intentionally direct: users explore the boat, adjust the options, and see the result change in real time. The 3D model stays at the center of the experience, while the interface guides the user through materials, components, and technical details without making the flow feel heavy.
The main flow includes:
- Model exploration — the boat is displayed inside an interactive 3D scene with lights, textures, water, and dedicated views.
- Variant selection — users can work on exterior and interior details, glass, seats, dashboard, accessories, finishes, and engine options.
- Immediate preview — every change is applied directly to the model, keeping the result clear at every step.
- Final summary — the configuration is collected into a unique code and can be exported as a PDF with images and organized details.
The interface is bilingual, Italian and English, and works on both desktop and mobile. The goal was not to fill the screen with controls, but to give the boat room to breathe and make each choice easy to read.
The 3D layer
The configurator uses Three.js with React Three Fiber. The boat model is loaded in GLB format and managed inside an interactive scene. Each configurable area is connected to an interface category: when users select a finish or component, the system updates materials, textures, colors, or parts of the model.
Variant management is separated into dedicated configuration files. This makes it easier to add or change options without rewriting the main logic, keeping the project cleaner and more maintainable over time.
Dedicated camera views were also created for exterior shots, interior shots, and summary images. The same views are used during PDF generation, where the scene is captured and inserted into the final document.
Saving and admin area
Alongside the visual experience, the project includes a lightweight Node.js backend for saving configurations, generating identification codes, and browsing saved archives from an admin area.
The dashboard makes it possible to review saved configurations and understand which choices are selected most often. This turns the configurator into more than an interactive presentation: it becomes a useful tool for commercial follow-up and preference analysis.
My contribution
- development of the React/TypeScript application with Vite;
- integration of the 3D scene with Three.js and React Three Fiber;
- loading and management of the GLB model;
- configuration logic for materials, textures, finishes, and components;
- dedicated camera views for interior, exterior, and summary output;
- bilingual Italian/English interface;
- generation of the configuration summary and final PDF;
- lightweight Node.js backend for saved configurations, admin archive, and statistics;
- optimization across visual quality, usability, and performance.
Technical stack
| Area | Technology |
|---|---|
| Frontend | React, TypeScript, Vite |
| 3D | Three.js, React Three Fiber, Drei |
| Scene | Three Stdlib, Postprocessing, lights, shadows, water |
| Model | GLB |
| Backend | Node.js |
| Data | Dedicated APIs and JSON archive |
| Output | Configuration summary and PDF generation |
Project value
The configurator helps present a customizable boat in a more immediate way. The available combinations do not remain abstract: they become visible, comparable, and ready to share with the client.
Credits and rights
Project developed for Gruppo Vizianello within Webngo-TopTouch. Trademarks, content, graphic assets, and digital elements belong to their respective owners.