Minimal Three.js product configurator starter (parametric geometry + live spec, no build step)

Showcase
1

Hey folks,

I wanted to share a small starter I put together for anyone who needs to spin up a Three.js product configurator quickly, without pulling in a bundler or a framework: threejs-product-configurator-starter.

Live demo: Three.js Product Configurator — Starter (by GroDev)

What it is

A single index.html (importmap + <script type="module">) with a parametric mesh, live-updating dimensions, material color swatches and a running price readout. No package.json, no compile step — fork, tweak state, done.

What I focused on getting right (in case it’s useful reference)

  • Geometry disposal on every parameter change — oldMesh.geometry.dispose() before assigning the new one. Without this, the WebGL context leaks and Chrome tabs hit ~500 MB after ~20 configuration changes. I saw this bite me on a client project and made a point of getting the disposal loop right here.
  • Material color updates via .set(hex) on the existing MeshStandardMaterial — not by replacing the whole material. Replacing breaks fog and shadow bindings, and it’s easy to miss because it looks fine in the first render.
  • renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) — a common gotcha where 4K displays at 200% scaling produce 4× more pixels than you’d expect and tank FPS.
  • Lighting rig picked for material preview rather than the default 3-point studio, so glossiness/roughness reads visibly on the mesh.

What it deliberately doesn’t do

  • No build step (importmap is the entire point — anyone can fork and open index.html locally).
  • No framework wrapper.
  • Client-side price is illustrative only (there’s a note in the code that real quotes belong server-side — you don’t want your users editing prices in DevTools).

Why I’m sharing

I use this pattern in real client work (custom configurators for Polish manufacturers — pools, awnings, illuminated signs, packaging), and this repo is the stripped-down educational reference I wish existed when I was learning. If it saves someone else a few hours of “why does my WebGL context leak” or “why do my materials look flat,” great.

Feedback welcome — especially on the lighting rig defaults and whether the price-readout section should be trimmed to keep the starter narrower in scope.

Cheers,
Dominik

I build custom Three.js configurators as GroDev — this starter is the MIT-licensed reference version, no strings.