Hey,
I am running a small business selling prefab houses and I noticed various configurators popping up. I noticed some of them are using threejs (good example > https://lugarde-configurator.com/)
Can somebody give me a bit more insights about:
Yeah they are usually custom built for a specific domain. I’ve written shelf configurators.. solar panel configurators.. etc.
Most things have domain specific features that have to be integrated somehow. Sheds don’t have a “number of shelves” parameter, for instance, and this isn’t easily automatable (unless you count using an LLM to make one)
Threejs is just a “scene graph” on top of WebGL.. so instead of writing low level drawing commands, you can work with “meshes” and “objects” and “materials” which makes it easier and better organized for creating structured cad like things. It supports 3d object hierarchies.. like a door can have a doorknob as a child, so when you rotate the door, the doorknob stays attached to it, but the knob is still able to rotate independently itself, and have a different material etc.
It also provides support for loading/exporting different model/file formats, and many many visual effects/lighting models, and tools to make 3d stuff look good.
If you want to explore/get a feel for using it for a configurator.. say something like.. if you made custom jewelry boxes, and your client can specify width/height/depth…
You can go into google gemini and use a prompt like:
“Generate me a single page clickable HTML file that uses THREEJS to make a jewelry box configurator, that allows the user to specify width/height/depth in inches, and can show an animation of the lid opening and closing, and when the user hits submit, have it output a text file, and download it to the user, containing the users desired parameters for manufacturing.”
Then, with a bit of luck, this will spit out code that you can paste into a “boxconfigurator.html” file, and then doubleclick it to try it out.
boxconfigurator.html (5.3 KB)
I designed interiors of buildings based on geometric data.
If you wanted to expand this so that users could easily modify the data themselves, additional code would be required.
You can find a simple example of such interaction at eXtended eXamples
from the Collection of examples from discourse.threejs.org
