Shed Configurator V2 (Babylon.js + React)

Demos and projects
, , ,
1

Hey guys

I wanted to share a project I’ve been working on recently and get some feedback.

It’s a real-time 3D shed configurator built with Babylon.js and React. The idea is pretty simple: users can customize a shed (dimensions, materials, colors, etc.), and everything updates instantly in the scene.

I’m generating most of the structure dynamically, so the whole model changes based on user input rather than using pre-made models.

:link: Live Demo

https://portfolio-eight-pied-5cy2wtrmjk.vercel.app/project/shed-configurator-v2

What it currently does:

  • Change width / height / length and see updates immediately

  • Customize materials and colors for different parts

  • Real-time interaction with decent performance

  • Procedural generation for walls, roof, etc

Would really appreciate any feedback, suggestions, or best practices—especially from people who built similar configurators with Babylon.js :raising_hands:

1917×907 437 KB

img1
img11918×908 389 KB

img2
img21917×902 501 KB

img3
img31916×907 371 KB

img4
img41916×907 398 KB

img5
img51917×911 531 KB

img6
img61912×910 369 KB

img7
img71915×907 366 KB

img8
img81911×900 365 KB

img9
img91917×912 384 KB

6 Likes
2

What is the format of supported 2D plans?
As a minimal app looks very good, I like white dimension things especially :slight_smile:
You may have a look at my IFC Viewer, there are some functions which may be useful for any house confgurator - https://ifc.babylonpress.org/

3

Some quick ideas:

The ground could be more realistic in terms of cover. It is very confusing regarding style and scaling.

Shadows would help to get a more sophisticated 3d look and feel.

Materials in general .

Day/night situation, sunangle

Props

Best. Werner