Design a lamp in your browser: an AI-assisted 3D configurator

Two sliders, a different lamp

A 46 cm shade on a lamp 36 cm tall gives a broad, squat form. Now change the diameter to 28 cm and the height to 60 cm. The same parts make a much slimmer silhouette. That is why we built this configurator: to make those decisions visible immediately, without drawing each variation separately.

We called the design Mora. You can change its proportions, color and light, then rotate the lamp to inspect different sides. Underneath is a spatial mesh rendered with WebGL, a browser technology for 3D graphics. Mora is our example for further development, not a real product for sale. This article is not a test of a particular AI model either.

Start with a shape and a few decisions

When asking a coding model for a similar project, describe the form first. Ours has a rounded mushroom-like shade, a slender stem and a low base. You can obtain that shape by rotating a profile around a vertical axis. Increasing the diameter widens the shade; increasing the height raises it and lengthens the stem.

Next, decide what users can change. Mora has two sliders, a palette with a custom color picker, a light switch and view rotation. Color affects the ceramic parts while metal details retain their own finish. Reset restores everything, including the camera. The prompt below covers that scope: a single-file configurator without a store, login or external resources.

Build a standalone table-lamp configurator in one HTML file, offline and without libraries.
Use WebGL: a real 3D mesh, perspective, depth buffer, surface normals and lighting.
Model: rounded mushroom shade, slender stem, low base, small metal details and a cable.
Controls: shade diameter 28–46 cm (default 38), lamp height 36–60 cm (default 45), ceramic color from a palette and custom picker.
Add a warm-light switch. The glow may be illustrative; do not describe it as a photometric simulation.
Rotate the view by dragging horizontally; on desktop, vertical dragging changes the viewing angle. Add buttons and all four arrow keys as keyboard equivalents.
No automatic rotation or inertia. Vertical touch gestures must allow page scrolling.
Reset restores dimensions, color, light and camera. PNG export saves the currently rendered canvas without the settings panel.
Use a calm product-studio appearance, matte ceramics, readable dimensions and a panel beside the scene, below it on phones.
Support a 320 px screen, unavailable WebGL and visible focus. Do not fetch images, fonts or models from the network.

How do we see that the shade is rounded?

If the entire object were painted one flat color, some of its shape would disappear. Highlights and shadows show where the surface turns. The program calculates them partly from normals: vectors perpendicular to the surface that describe which way each part faces. The sources below include MDN’s explanation and a WebGL example.

Our scene has ambient light, directional studio lighting and a subtle sheen. Switching on the lamp adds a warm underside to the shade and a glow on the ground. The shadow beneath the base and the glow are simplified. They help us assess the form; they cannot tell us whether a real lamp would light a desk sufficiently or how its light would spread through a particular room.

Rotate it and look under the shade

Drag the view horizontally, then switch to a view from above. Look at the shade’s edge, its connection to the stem and the base. In your own version, set both dimensions to their extremes too. A gap, detached part or disappearing surface shows where the geometry needs work. You can describe that specific fault to the model when requesting the next change.

On a phone, the panel sits below the preview. A horizontal gesture rotates the lamp; a vertical gesture scrolls the page, and buttons change the viewing angle. You can also focus the preview with the keyboard and use all four arrow keys. We did not add automatic rotation: your chosen frame stays put, including with reduced motion enabled.

Which version are we keeping?

To keep a particular frame, choose “Save this view as PNG.” You receive an image with the current dimensions, color, light and viewing angle, without the control panel. Its resolution depends on the preview size and screen scale, which we capped at twice the size. Saving uses canvas.toBlob, explained in the linked documentation.

The HTML is useful for further design. It contains the whole configurator with its initial settings and runs offline in a WebGL-capable browser. If your variation should become the new starting point, enter it in the script’s defaults object.

Centimeters describe the concept’s proportions here. Neither the PNG nor the downloaded HTML is production documentation. But for discussing whether the shade should be wider and the ceramic darker, you have something much more useful than a description alone.