Cabinet configurator

Prepare 3D Model

You can download the 3D cabinet model from here to review its center axis adjustments. By opening the file in your preferred 3D software (e.g., Blender), you can examine the pivot point placement and see how the center axes are positioned for each component (e.g., side panels, shelves, front door(s), legs). This detailed review of the axis setup offers a useful reference for applying similar configurations in your own projects.

Download [cabinet-example.glb]

When building a cabinet configurator that allow size adjustments, two most common aspects must be taken into account during 3D model editing:

1. Center Axis Placement for Legs, Handles, and Hinges

If the cabinet has legs, the placement of the center axis is crucial for ensuring accurate scaling, positioning, and alignment during configuration. In the example 3D cabinet model, the pivot axis for the legs is aligned with the side panel, allowing the legs to move correctly without distorting their shape or position when the cabinet is scaled in width, depth or height.

The same principle applies to smaller components such as handles and hinges. Correct pivot placement ensures that handles move naturally with the door, and hinges maintain proper alignment during model adjustments. Misaligned pivots on these elements can cause unrealistic movement, incorrect scaling, or gaps between connected parts.

1. Maintain consistent thickness for the side, front, and back panels, as well as the shelves, when scaling the cabinet

When scaling a cabinet in height along the Y-axis, it’s important to maintain the structural proportions of its components. If the cabinet includes shelves, their thickness must remain consistent as the overall height increases; otherwise, the shelves may appear stretched or unnaturally thin.

The same principle applies to the side, front, and back panels. Keeping their thickness uniform ensures the cabinet maintains a realistic and visually balanced appearance.

Achieving this requires correct placement of the center axis for each component. For example, if the pivot of a shelf or panel is positioned at its geometric bottom center, scaling the cabinet along the Y-axis will expand the space between elements without altering their thickness. For the side panel, we can see from the file that the axis is positioned internally, which means it is located at the inner bottom center. Misaligned pivots can lead to distorted parts, gaps, or overlapping geometry, which can compromise both the functionality and aesthetics of the model.

Build the configurator

Example of how to correctly set up the numeral variables for width, length, and height for cabinets

Create a new product by clicking the blue 'Add Product' button (ensure the 'Configurator' option is checked). Once the product is created, add the cabinet’s 3D model from the 'Add 3D Models' tab, then create the size variables from the 'Create Options' tab. For more details, see the New Product chapter.

In the 'Create Options' tab, use the dropdown in the upper-right corner to select the Numeral block and create the first size variant, 'Width'. Click 'Add block' to add the Numeral block.

Before adding the Numeral block, assign it a title, choose the field type (in this case, 'Horizontal bar'), and then click 'Add Variant' to create the first size variant: Width.

Width

When you click 'Add Variant,' a popup window will appear where you can define the 'Width' variant. Enter a title for the variant (in this case, 'Width') and use the same name for the variant name ('width'). Then, in the 'Select 3D Model' section on the right, choose the 3D model you want to scale.

Next, select the 3D parts that will be affected by the block. In this case, we choose all parts.