Three.js From Zero · Article s12-12
Cabinet Configurator — modular logic, snap rules, and SKU sanity
Cabinet Configurator — modular logic, snap rules, and SKU sanity is Article s12-12 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.
Furniture configurators look visual, but their hardest work is logical: snap rules, invalid combinations, and making sure the pretty composition still maps to a shippable SKU.
1. Why this article exists
This article extends the S11 furniture story into the logic-heavy side that Roomle-style systems actually live or die on.
2. What we are building in the demo
- A modular cabinet wall with snap-aware blocks.
- A width/height system that shows how rule engines shape visual freedom.
- A tiny example of “nice-looking but invalid” versus “actually sellable.”
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
4. Implementation sketch
if (module.width + currentRowWidth > maxWidth) {
return { ok: false, reason: 'Row exceeds merchandised width.' };
}
attachAtSnap(module, targetCell);5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Unbounded freedom usually creates unsellable output.
- Logic rules need to surface clearly in the UI, not hide in silent failure.
- A good modular system expresses constraints without feeling punitive.
6. Takeaways
- Furniture configurators are as much rule systems as render systems.
- Clear constraints make buyers feel guided, not restricted.
- Snap logic is a commerce feature, not merely a 3D interaction trick.