Product Configuration
The Visual Component provides two ways of controlling and updating the 3D product’s configuration in your UI:
The automatic DOM binding method is strongly recommended for most interfaces. The manual binding method is typically used for more complex edge cases where multiple actions need to be taken following a single click or event in the UI.
Mapping your product’s properties and values
Regardless of which control method you use, your 3D product will be set up with an array of properties that may be configured, and values that those properties may be set to, mapped out in the configurability matrix provided to you by Dopple.
These properties and values may control things like the materials, colors, meshes, environments, and more.
For example, say a sofa product has been set up with three configurable properties:
- Sofa type
- Sofa material
- Sofa color
The sofa type could have values that swap the 3D mesh, such as toggling between a two-seater or three-seater sofa. In this case, these values are predefined in the platform.
The sofa material could have values that swap the base texture that is applied to the mesh, such as leather or fabric materials. In this case, these values are predefined in the platform.
The sofa color could have values that set the albedo color of the texture to some RGB value, such as [202, 23, 39] for a crimson color. In this case, the values can be set by the UI to any valid RGB value (between [0, 0, 0] and [255, 255, 255]).
As you prepare to add buttons and inputs to your UI to control your 3D product, you will need these properties and their corresponding values to pass to the Visual Component.