A product can be configured in two ways. A 2D configurator builds the preview from layered images, one image per choice. A 3D configurator loads a 3D model instead, and the customer can rotate and zoom it.
Both use the same layers and choices, the same conditional logic, the same pricing. What changes is how the preview is produced.
What you need
A glTF model, saved as .glb or .gltf. That is the only model format the viewer loads.
The model should be built with configuration in mind: the parts a customer will change need to be separate, named objects inside the file, because that is how choices are bound to the model. A single merged mesh cannot be configured.
Site-wide 3D viewer settings
Two levels of setting exist, and it is worth knowing which is which.
Site-wide settings live in Product Configurator > Settings > 3D viewer. They decide what the viewer is capable of loading, and apply to every 3D product. Per-product settings live in the configurator's own 3D settings section and decide how that one product looks.
The site-wide section holds three options, each of which loads an optional decoder on the front end:
- Enable Draco compression support — loads DRACOLoader, so models using
KHR_draco_mesh_compressioncan be displayed. Blender and glTF Pipeline produce these. - Enable Meshopt compression support — loads the Meshopt decoder, for models using
EXT_meshopt_compression. - Enable KTX2 texture support — loads the Basis Universal transcoder, for models using
KHR_texture_basisu(.ktx2textures). Supercompressed textures stay compressed on the GPU, cutting both download size and video memory. On a heavily textured product this usually saves more than mesh compression does.
In this section
- Setting up a 3D product — from a model file to a working 3D configurator.
- 3D objects — models, lights and environments, and how they are managed.
- 3D settings — the per-product viewer settings: environment, background, shadows, camera limits, renderer, and the Premium postprocessing and AR sections.
3D Premium
Some 3D capabilities come from the separate 3D Premium add-on rather than the core plugin:
- Hotspots — clickable points on the model that open a layer, select a choice, show a description, play an animation or move the camera.
- Animations — play the animations stored in the model when the customer switches view or clicks a hotspot.
- Positions, anchors and layouts — put a model on an anchor in another model, move parts when a choice changes, and repeat copies with layouts.
- Postprocessing — contact shadows, studio grading, reflections and glow, applied by preset. The same look is applied to the images saved with the order.
- Augmented reality — let customers open the configured product in AR on supported phones and tablets, through iOS Quick Look and Android WebXR.
- Background image and colour changes — an image behind the model, and choices that change the background colour.
Without the add-on the viewer works fully; these are additions to it.
Customising the viewer with code
The viewer exposes its Three.js scene to developers, so custom materials, shaders, animations and full-screen postprocessing passes can be added without forking anything. See The 3D runtime API.
Which configurator type to use
3D suits products where the shape matters and the customer wants to look around it — furniture, footwear, equipment, anything where "what does the back look like?" is a real question. One model covers every angle, so you are not producing an image per option per view.
2D remains the better choice when you already have good product photography, when the product is essentially flat, or when you have no 3D model and no way to produce one. A well-made 2D configurator looks better than a poor 3D one, and it loads faster.
You are not locked in: the Configurator type setting on the product can be changed later.