How to build a 3D Product Configurator

TinyGLB can be used to easily create a 3D product configurator from a GLB file with no coding required. You can add controls to your model web page called "selectors" which allow the user to customise the view of the 3D model:

• Variant selector (display different variants of the model)
• Material selector (display different materials on the model)
• Visibility selector (toggle visibility of meshes)
• Node selector (show/hide different parts of the model)

Variant Selector

GLB files support a concept known as material variants. This is where you can easily specify alternative materials for a model, for example a sofa that is available in different colours. Once the variants are set up in the GLB model a variant selector can be easily added in TinyGLB to allow the user to switch between the model variants.

GLB variants work well for simple scenarios but if you have a model with many combinations then the number of variants required can get too complicated. For example, if you have a sofa where you can customise 5 different fabric colours and 5 different leg colours, then that's 25 possible combinations, and you would need to create a variant for each fabric/leg combination. As the number of combinations grows this becomes unmanageable. In these cases the material selector in TinyGLB can be used instead.

Material Selector

The material selector allows the user to switch between materials on meshes. In order to use this you need to add each option as a separate material in the GLB file, but they don't need to be assigned to any mesh or variant. Then in TinyGLB you can use the material selector to configure which nodes can have material options.

Some product configurator platforms allow you to override material properties at runtime, rather than requiring separate materials in the model. GLB materials have 12 different properties that can be customised:

• Base color factor
• Base color texture
• Metallic factor
• Roughness factor
• Metallic roughness texture
• Normal texture
• Emissive color factor
• Emissive texture
• Occlusion texture
• Double sided
• Alpha blend mode
• Alpha cutoff

We believe it's simpler to encapsulate the material options within the GLB model by creating separate materials, than to store them within the configurator settings. It does mean that the initial model load time may be longer as all textures are loaded up front from the GLB file. The benefit however is that there will be almost no delay when switching between materials (you might see a delay if you were to load external texture files at runtime instead).

Visibility Selector

The visibility selector allows the user to toggle the visibility of one or more nodes. You can control the labels on the toggle buttons and whether the nodes are shown/hidden by default.

Node Selector

The node selector allows you to define a list of nodes to choose from where only the selected node is visible.