Atelier Volume — Interactive 3D configurator

The starting point

Atelier Volume is a web application I designed and built to make a building project easy for anyone to read. The demo is based on the model of an existing apartment building: its geometry is kept exactly as it is; only the identifying information and the file's metadata have been removed.

The problem

Around a building, discussions run on plans, annotated photos and long messages, and everyone pictures the idea in their own way. The 3D model, when there is one, stays inside software that only specialists know how to use. What was missing was a simple tool to see the building, try out a change and pass it on without ambiguity.

The answer

I turned the architectural model into an interactive tool that runs without installation, on a computer as well as on a phone. You rotate the building, select an element, change it, then share your version through a simple link or in a printable report.

• 485 building elements that can be selected and edited: windows, balconies, roofs…
• Move, rotate, resize and recolour each element, with the mouse or in the side panel
• Add volumes and illustrative equipment to try out an idea
• Comments on the proposal, plus undo and redo to compare attempts
• Local saving in the browser and a snapshot shared by link
• JSON export and import, export of the 3D model (GLB) and of the current view as an image
• Printable PDF report, interface designed for both computer and mobile

The demo in pictures

Try the demo ↗︎

Under the hood

The building is displayed and edited right in the browser with Three.js; the application, written in JavaScript and bundled with Vite, loads without an account or installation. Python scripts prepare the published model: they strip the file's metadata without touching the geometry. With Higgsfield 3D Jutsu, I worked on materials and rendering — generic textures for render, roof tiles and windows, reworked lighting — so the model reads at a glance. The site is deployed on Vercel.

The notable challenge

Making the model more realistic without losing the editing: textures and lighting had to be added without changing the geometry or breaking the selection of the 485 elements. A roof made of several materials, for example, had to remain a single element you move in one gesture. At every step, I checked that the exported model, reopened in 3D software, found all its elements in place.

My role

I ran the project from end to end: understanding the need, designing the interface, developing the application and the 3D editor, preparing the model, working on materials and lighting, testing on computer and mobile, then putting it online.

Where the project stands

The demo is online and open to everyone. Dimensions and positions remain indicative: the tool is for visualising and discussing an idea; it replaces neither a survey nor a technical study, and the quality of the rendering does not guarantee the accuracy of measurements. Editing works at the level of elements; fine work on their shape continues in 3D software after export.

What about your project?

The same approach adapts to other trades and other objects: all it takes is a 3D model and a clear idea of what the user should be able to do. I can build for you:

• 3D configurators, to choose and visualise an option before ordering it
• visual simulation tools, to test a change before carrying it out
• interactive project presentations, shared through a simple link
• interactive reports tailored to your trade, printable as PDF

A few figures

The project’s tools

3D display and editing

Three.js, JavaScript

Web application

Vite, computer and mobile interface

Model preparation

Python

Materials and rendering

Higgsfield 3D Jutsu

Hosting

Vercel