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.

To finalize defining the Width variant, we click 'Numerical' section and we do the following set-up:

1. Type of Value: select 'Size'

2. Show dimensions: check 'dimensions' if you want to show the size in the front-end

3. Unit: select the unit measurements (in our case I'll choose 'cm')

• Default value: type the original width size of the 3D model (e.g. 60cm)

• Increment: the change in increment as we scale the table (e.g. 1cm)

• Minimum value: the minimum width (e.g. 45cm)

• Maximum value: the maximum width (e.g. 80cm)

• Scaling on: in this case, I select the X-axis, which the cabinet will scale along for the width

• Position parts: we select the parts that will remain in place (not scale) while the cabinet scales in width along the X-axis.

Click 'Save' and add your first Numeral variant, Width.

Next, you can repeat this process to add two more variants: one for Length and another for Height. The steps are the same, except for the Title and the 'Numerical' section, where the setup differs. You will need to adjust the default, minimum, and maximum values, change the scaling axis (Z or Y), and select different position parts (the parts that don't scale).

Length

Now, add the Length variant by clicking the blue 'Add Variant' button. In the popup, enter 'Length' for the title and variant name, then select all its 3D parts before configuring the Numerical settings.

In the Numerical settings, set up the length as follows:

• Type of value, show dimensions and unit are the same as found above in Width.

• Default value: we type the original mesh length (depth) of the table (e.g. 45cm)

• Increment: the change in increment as we scale the table (e.g. 1cm)

• Minimum value: type the minimum length of the table (e.g. 30cm)

• Maximum value: type the maximum length of the table (e.g. 65cm)

• Scaling on: in this case, I select the Z-axis, which the cabinet will scale along for the width

• Position parts: we select the parts that will remain in place (not scale) while the cabinet scales in width along the Z-axis (typically these are the front parts and legs).

Click 'Save' and add the second Numeral variant, Length.

Height

Finally, add the Height variant within the Numeral option block. The process is the same as for Width and Length, with differences in the title and variant name (use 'Height') and the Numerical settings.

Depending on which parts need to be scaled along the Y-axis, the correct parts must be selected. In our case, we will scale the side panels (left/right), front and back panels.

In the Numerical settings, we input the following settings for 'Type of value: Size', 'Show dimensions: checked', 'Unit: cm' and 'Default value: 80', 'Increment: 1', 'Minimum value: 60', Maximum value: 90', 'Scale on: Y axis' and in 'Position parts' select the fixed parts, in our case: shelfs and legs. These values may vary depending on the type of cabinet.

After clicking "Save", you should see three variants in the Numeral option block: Width, Length, and Height. Click "Save" again to update the entire Numeral option block, then click "Preview".

In Preview, the result should look similar to the image below. Test by changing the width, length, and height to ensure they scale correctly. If not, review the size variants to confirm they are set up properly, and verify you’ve followed all the steps on this page. If the sizes still don’t scale correctly, check that the 3D model’s center axis is positioned correctly, and update the model if necessary.

Add more options

Once the size functionality is working correctly, you can enhance your configurator with additional options, such as color selection or choosing different parts. For example, customers could select from various types of front doors, legs or no legs, and accessories, while applying specific restrictions where needed.

For more information on adding extra option blocks to your configurator, refer to the Product section and explore the different types of option blocks and restrictions available.