Sizing: Keep the proportions
Sizing for windows, doors, tables, cabinets, etc.
Last updated
Was this helpful?
Sizing for windows, doors, tables, cabinets, etc.
Last updated
Was this helpful?
Instruction for Positioning Mesh Centers and Models for Correct Scaling and Position Adjustment
This is a more advanced page that requires additional skills in 3D modeling to properly prepare a 3D object for resizing using the Numeral option set block with Position Parts. In case, if you are not familiar and do not want to delve deeper into learning how to properly prepare the 3D model, we always recommend that you turn to a professional, a friend or coworker, or hire a 3D artist/modeler for this job, using well-known freelance platforms where you can post the job and wait for the offers.
Preparing 3D Models
If your configurator needs to allow sizing, for example setting width, length and height, you will probably need to prepare your 3D model before you upload to the platform. Depending along which axis the 3D model will stretch, the platform needs to know which parts will stretch and which don't. For example, for a table, we might need to set the table top surface to stretch along the x-axis (e.g. width), but the table legs should not, they should keep the same proportions, but at the same time keep their position in relation with the table top as the size of the table top surface changes. Please find an example below:
As we can see in the image above, the edges for the table surface are cut because we don't want to distort the shape of the top surface if it has a shape other than rectangular when we resize. Basically, we separate the parts that stretch and the parts that don't stretch, in this case the margins which might not have a rectangular shape (for example, edges could be rounded). For the main top surface the pivot is found right in the middle of the 3D part (see pivot nr. 1 in the above image). This usually is for the stretching, in this case the width and length.
Then, in the image above, we have 2, 3, 4, 5, 6 more numbers marked for the other table parts, and we see where the pivots for the edges are in relation to the top of the table. If your table top is rectangular, then, you don't need the 2, 3, 4, 6 edges, only for 5 the legs. As you can see, their pivots/centers are added to the corners near the edge of the main table top. In this case, the only parts that will stretch are the ones going along x-axis (table top and side edges), the only parts which they will never stretch are the corners. The rest of the parts that don't stretch will only translate along the axis but not stretch. This is a key feature that will assure we will keep the proportions and positions of the table intact when we resize.
This can also be applied to fixed frame windows.
A few pivots found on a double-frame window with hinges.
But you can apply this to cabinets, wardrobes, sheds, garages, carports and other objects that you can resize. Depending on the complexity of the configurator, this might be a back and forward 3d editing until you have the right 3d model for the configurator.
IMPORTANT: It is essential to edit the pivots as explained above to correctly resize a multi-part 3D object in the configurator. Before uploading to the platform, you can check the pivots (central meshes) in the three.js editor here.
Setting up the size input with Numeral option set
Once you have prepared the 3D model and its pivots, you are ready to upload and have your first test. In the documentation, we continue with the table and set the input options for width, length, and height. We create the configurator, select the layout, assign the 3D model and in the 'Create Options' tab we add the Numerals option set just like we added in the previous chapter.
After clicking "Add Block", the application will ask us to define the Numeral option set by adding a "Title", select "Input Style" and create the first variant, in our case "Width".
When we click on "Add Variant" a pop-up window will appear where we need to define the first variant, "Width". In the title I enter 'Width' and the same in the Variant Name field, I will select the 3D model that we will use in this variant, in this case the 3D table.
Next, we need to select the parts that will be resized in 'Select 3D Parts'.
IMPORTANT: Please note that in this case we will select all 3d parts of the table to be included in the scaling proportions logic.
Just like in the previous chapter, we click on the "Numerical" section and start selecting "Type of value", here we select Size; Unit of measure, here we select cm; type "Default value" for the width, in this case the table width is approximately 180 cm wide.
Additionally, we set the increment (type 1 cm or any other number), Minimum value (type 90 cm), Maximum value (210 cm) for this example.
Next in 'Position parts', we need to select the parts that will not stretch along the x-axis (the width). In this case we will select the corners, the legs and the edges that are perpendicular with x-axis in z direction (the length or depth of the table).
The last setting is where we assign which direction this variant will resize in. In this case we select the x-axis for the width and if you want to create a length or depth variant it would be the z-axis, and for the height the y-axis.
You can create 3 separate variants in the Numeral block that cover all 3 axes: width, length and height. Now, click "Save" to add the first numerical variation.
Now, click the "Save" button located on the bottom right of the screen to create the Numeral block. Click "Preview" to see the result.
You can repeat the same process, but only to select different position parts and axes for length and height. Once this feature is mastered, you can apply it to virtually any type of object, for example, sheds, carports, garages, roofs, windows, doors, cabinets and many other resizable objects.
