Configurator packs: swapping material zones

Configurator GLBs expose separate named materials for areas such as body, doors, handle, or trim. Changing one material updates that zone without rebuilding the model. Zone names and availability vary by asset, so use the downloaded component or README as the authority.

Inspect the available zones#

With React Three Fiber, useGLTF exposes the materials by name:

// In the bundle this file lives at glb/configurator/fridge_freezer.glb
const { materials } = useGLTF('/glb/configurator/fridge_freezer.glb')

console.log(Object.keys(materials))
// Example: ['body', 'doors', 'handle', 'trim']

Configurator models sit in their own glb/configurator/ folder rather than at the pack root, so copy that folder into your public directory and load from wherever you put it. An included component may preload a flat path such as /fridge_freezer.glb, which assumes the file was copied to your public root; adjust the URL to match your own layout.

In packs that ship both an environment and a configurator version of the same product, the configurator component carries a Cfg suffix — FridgeUpright.tsx for the fixed-colour model, FridgeUprightCfg.tsx for the zoned one. Where a pack is configurator-only, the components use the plain name.

Current configurator source GLBs are commonly uncompressed and use material base colours rather than vertex colours. Check the specific file before assuming that no decoder or textures are required.

Recolour a zone#

Changing a cached material changes every model instance that shares it:

const { materials } = useGLTF('/glb/configurator/fridge_freezer.glb')

materials.body.color.set('#2f3b44')
materials.doors.color.set('#e7e2d6')
materials.handle.color.set('#b9944f')

That behaviour is useful when one configurator controls every instance. For independent instances, clone each material before changing it:

const { nodes, materials } = useGLTF('/glb/configurator/fridge_freezer.glb')
const bodyMaterial = useMemo(() => materials.body.clone(), [materials.body])

useEffect(() => {
  bodyMaterial.color.set(bodyColour)
}, [bodyMaterial, bodyColour])

return (
  <mesh
    geometry={nodes.fridge_freezer_body.geometry}
    material={bodyMaterial}
  />
)

Dispose cloned materials when the component unmounts if you create them outside React Three Fiber's normal disposal flow.

Components and pivots#

An included component may expose typed nodes and materials, or it may wrap the GLB more generally. Inspect the downloaded file for the exact API. Configurator pivots can differ from environment-asset pivots, so verify the model's origin before building a turntable or placement tool.

Rigged character packs apply the same idea to a person rather than a product, with zones such as skin, hair, and top_main driving colour. Their zone names are listed in that pack's README.

Preview the product#

Some configurator bundles include a showroom or inspector, but this is optional and its dependencies vary. Build customer-facing controls from the GLB's named materials rather than depending on the included preview page.

Next steps#

• Recoloring with palettes — understand vertex-colour packs and global tinting.
• Using a pack in React Three Fiber — load components and GLBs in R3F.
• Scale, orientation & pivots — place models using their documented origin.