All projects

03 · Interactive 3D · Personal · Open source

VaryForm 3D Configurator

An interactive parametric 3D shelving configurator: dimensions, sections, materials, 3D scene controls and a parts calculation.

Role
Architecture, UI and 3D: Nuxt, TypeScript, Three.js.
Stack
  • Vue 3
  • Nuxt
  • TypeScript
  • Three.js
  • WebGL
  • WooCommerce
A shared VaryForm project: the 3D shelf, the price, PDF and DXF export
VaryForm configurator: dimensions, sections and finish on the left, the 3D shelf and the price

Challenge

Show the buyer an accurate shelf model that rebuilds on every parameter change, and calculate the parts list instantly.

Solution

  • 01 Parametric geometry: width, height, depth, number of sections and shelves.
  • 02 Materials and finishes that switch without reloading the scene.
  • 03 Camera controls, view reset, 3D and drawing modes.
  • 04 Parts calculation driven by the current configuration.
  • 05 A shareable project link, PDF and DXF export.
  • 06 The configuration flows into a WooCommerce order: dimensions, material and the parts list.

Result

A working demo with open source code on GitHub — rotate the model and inspect the implementation.