Hey everyone,
Just made an account to share a project we’ve been working on for a while. It’s a tool to help people design and purchase custom staircases. You can set dimensions, choose materials, add turns… Basically when we started this project we didn’t realise how complicated staircases can get!
You can try it out live here: https://www.tkstairs.com/stair-designer/build.
TK Stairs is our client, we don’t make staircases! We’re a web agency based in the UK (Barnsley more specifically!) and we love to use Babylon where we can.
EDIT: We also built the front end for the website, which uses Medusa for e-commerce (another tool we really like)
Thank you, if anyone has any questions about how we did any of it, just let me know.
Chris
5 Likes
good job! looks professional and functions very well.
1 Like
Too bad I do not a staircase. Makes me want to buy one 
I found one minor clipping error:
Yeah we’re very interested to see how/if it effects orders. They had a 2d canvas based visualisation before, so we’re hoping that it’s help people get a better idea of what it is they’re actually ordering!
That’s interesting, thanks for letting me know about the clipping issue. I’ll sort that out.
That’s really well done. I wonder how much impact it would have on conversion. I keep thinking one day I will make time to build a configurator demo - I work in the e-commerce space. Anyway - great work - without digging into the code as I see you are loading a lot of .glb models, did you write parametric some configurations like building codes, etc? 
Thank you very much!
The GLB’s you’ve noticed are for the more complicated shapes (an example below).
In the example screenshot you provided, I think only the post caps are glb’s, the rest is generated using mesh functions in Babylon (ExtrudePolygon and the like).
I think these sort of 3d configurators are going to be more and more common place where you have business owners selling more bespoke, personalized products.
Thanks again!
Thanks. I went a bit mental on my first babylon.js game with CSG to make all the shapes - before I learned blender! Way easier to leverage models!! Thanks for sharing - did you end up with any useful design patterns or re-usable code? We see here some furniture and building applications maybe that can benefit from a library. Interesting you mention ExtrudePolygon - I’ve used that a lot in conjunction with CSG like here:
brianzinn.github.io/react-babylonjs/examples/basic/extrude-csg/
1 Like
Ah that’s cool. Yeah I was using that in a similar way.
It’d be interesting to think about how I could adapt some of what I’d done to contribute. It was the first time I’d ever created meshes for a tool in this way and I did find it to be a bit difficult to work with for a while. (Maybe it was just me needing to understand the parameters and how the mesh will be effected a little more).
1 Like
