How to Build a Web 3D Product Configurator with Bezi
You can build a working web 3D product configurator in Bezi in under an hour by modelling a base shape, wiring color states to simple buttons, and sharing the live link or export as GLB for your site. No plugin purchase is required on the free tier for public projects.
Why Use Bezi Instead of Three.js Directly?
Hand-coding a Three.js configurator means managing the renderer, loaders, lighting and state yourself. Bezi gives you a hosted scene and a visual editor, so the effort goes into the product, not boilerplate. The trade-off is control: you cannot write arbitrary shaders, and your scene lives on Bezi’s servers unless you export.
For a marketing page with 5-20 configurable options, that trade is usually worth it. For a complex web app with physics or custom post-processing, reach for a real engine.
How Do You Set Up the Base Model?
- Start a blank project and import your product mesh (GLB keeps materials; keep it under 50 MB).
- Center it at origin, then add a ground plane with a soft gray material so the product reads clearly.
- Add three lights: a key, a rim and a fill. A single light flattens the shape.
- Lock the ground plane in the layers panel so you do not accidentally drag it mid-review.
How Do You Wire Up Color Variants?
Create a separate material for each variant, name them clearly (Shell-Red, Shell-Blue, Shell-Black). Then add button objects to the scene and attach an interaction that swaps the target node’s material on click. Keep interactive objects on their own layer.
A practical detail: cap yourself at six colorways. Beyond that, buttons crowd the mobile viewport and click targets drop under the 44px accessibility minimum.
Can You Show Different Camera Angles?
Yes. Save named camera views — Front, Side, Detail — and let buttons trigger a smooth transition between them. Set transitions to 0.4-0.6 seconds; anything slower feels sluggish on a configurator where users click repeatedly.
How Do You Ship It to Your Website?
| Method | Effort | Best for |
|---|---|---|
| Live share link | None | Design reviews, quick demos |
| GLB export + viewer | Medium | Full site control, own hosting |
| Embed code | Low | Marketing pages, no dev help |
Export as GLB and drop it into a viewer like model-viewer if you want the asset on your own CDN. Bezi’s own embed is quicker if the free tier’s branding is acceptable to you.
What Slows These Projects Down?
Texture size is the usual culprit. A 4K texture set on a small product is wasted bandwidth; downscale to 1K and the scene loads noticeably faster on 4G. Also watch the object count — each interactive button costs draw calls, and mobile GPUs notice. If your tab is dropping frames on a mid-range phone, you have too many separate meshes: merge static geometry before export.
Quick Summary
- Bezi lets you build a 3D configurator visually, no Three.js boilerplate.
- Import a GLB under 50 MB, add 3 lights, and lock the ground plane.
- Cap colorways at 6 and camera transitions at ~0.5s for usable UX.
- Ship via live link, embed, or GLB export for your own viewer.
- Downscale textures to 1K and merge static meshes to keep mobile smooth.
