Modular Projects
Build drag-and-drop modular configurators with snap-aware placement, dedicated parts-picker UI Design settings, and consistent behavior across the Preview modal and Share view.
When to Use Modular Projects
Repeatable modules
Use Modular projects for systems assembled from repeatable 3D units such as kitchens, sectionals, storage, and lighting.
Scene composition
Users place and arrange modules directly in the 3D scene rather than only switching materials or visibility on a fixed model.
Admin-authored behavior
Each variant can define snap faces, offsets, origins, and the UI Design used by the module picker.
Preview and Share parity
The same module picker settings apply in both the Preview modal and the public Share view link.
Modular Block Setup
The Modular block powers drag-and-drop module assembly in Modular project types. End users compose products by placing, snapping, rotating, and mirroring independent 3D modules in a shared workspace. Ideal for kitchen builders, furniture systems, modular shelving, and similar products.
- 1Add a "Modular" option block (only available in Modular project type).
- 2Click "Add Variant" to create module variants. Each variant needs a label, value, and a selected 3D model.
- 3For each variant, toggle the Active Snap Sides — the bounding box faces (Top, Bottom, Left, Right, Front, Back) where the module can connect to others.
- 4Open the "UI Design" section to control how parts appear in Preview modal and Share view: choose Grid or List layout, thumbnail size, and how part names are displayed.
- 5For long part names, use List layout for always-readable rows, or Grid with 2 columns plus 2-3 label lines for a compact but readable palette.
- 6Set the Snap Origin — the corner alignment used when modules snap together (Lower Left, Lower Center, or Lower Right). Default is Lower Left.
- 7Optionally override the Snap Origin per side using the "Snap Origin Per Side" section — useful when different sides need different alignment (e.g., Left → Lower Left, Front → Lower Center).
- 8Fine-tune snap positions using the "Snap Offset (Advanced)" section to set per-side offset values.
- 9For asymmetric modules (e.g. an extension roof whose center is offset), use the "Snap Alignment Offset" section to shift incoming modules along the face plane on specific sides. This is a target-side setting — configure it on the module that others snap TO.
- 10If a variant must always connect from one authored side, set "Force Snap Side" on that variant.
- 11Configure Side Snap Settings: consumer add method (Drag & Drop or Click to Attach), rotation, mirroring, deletion, and visual feedback options.
| Setting | Description |
|---|---|
| Snap Origin | Default corner alignment for all sides — Lower Left, Lower Center, or Lower Right. |
| Snap Origin Per Side | Override alignment for individual sides. Sides without an override inherit the global Snap Origin. A badge shows how many overrides are active. |
| Snap Offset (Advanced) | Per-side numeric offset (−3 to +3) that moves each snap face plane in or out along its axis, defining an effective "snap box" that can be smaller (or larger) than the full model — e.g. raise the bottom plane above a roof's legs. This offset box is the single reference everywhere: the snap origin starts from it, the bounding-box highlight (editor and the connect-here indicators in Preview/Share) shows only the offset region, modules snap flush at it, and the Preview/Share camera frames it. |
| Snap Alignment Offset | Per-side lateral offset (−3 to +3) applied to modules that snap TO this variant. Shifts visitors along the face plane to compensate for asymmetric geometry. |
| Force Snap Side | Available on every modular variant. Forces the module to always snap using a specific source side — any of Top, Bottom, Left, Right, Front, or Back, as long as that side is enabled in Active Snap Sides. |
| Parts Palette Layout | Choose Grid or List for the module picker shown in Preview modal and Share view. List keeps long part names readable; Grid is denser and more visual. |
| Thumbnail Size | Set the module thumbnail card size: Small, Medium, Large, or XL. Larger sizes improve image recognition but reduce visible density. |
| Grid Columns | When using Grid layout, choose 2, 3, or 4 columns. Fewer columns give more room for long names. |
| Part Name Display | Show names below thumbnails, overlay them on thumbnails, or hide them entirely when thumbnails are self-explanatory. |
| Label Lines | Control how many lines each part name can occupy before truncating. Use 2-3 lines for readable names in grid layouts. |
| Instance Count Badge | Show or hide the counter badge that indicates how many copies of a module are currently placed. |
| Consumer Add Method | How end users place modules: "Drag & Drop" (free placement) or "Click to Attach" (select a target side, then click a thumbnail; dragging still works). |
| Enable Rotation | Allow end users to rotate placed modules. |
| Enable Mirror | Allow end users to mirror placed modules. |
| Enable Delete | Allow end users to delete placed modules. |
| Floating Toolbar | Show an action toolbar on the selected module (rotate, mirror, delete). |
| Snap Distance | How close modules need to be before they snap together. |
| Grid Snap Size | Position quantisation grid size (0 = free movement). |
| Cross-Block Snap | Allow modules from different Modular blocks to snap together. |
| One Module Per Side | Off by default. When on, each side of a host module accepts only one module from this block (all variants). Other sides and other blocks are unaffected. |
| Enforce Grounding | Ensure modules always sit on the ground plane. |
| Show Alignment Guides | Display alignment lines when module edges align during drag. |
| Show Dimensions | Display distance measurements between modules. |
Grid layout
Best when thumbnails matter most and names are short to medium length.
List layout
Best when names must remain easy to read in Preview modal and Share view.
Connection Indicators While Dragging
When a shopper drags a module in Preview or the Share view, the configurator highlights where it can connect. Indicators appear only on the faces where the module being dragged can actually attach — not on every face of every placed module. For example, an apex/roof piece that connects via its underside lights up the tops of the walls it can sit on, and never the wall sides; a wall piece that connects edge-to-edge lights up the side faces, not the tops. This keeps the workspace clean and makes it obvious where a piece belongs.
Each available connection point shows as a red open ring ("you can connect here"). As the dragged module nears a spot where it will snap, that point turns into a green filled marker that grows and pops ("release to connect"). Red → green, open ring → filled, small → large: the cue is legible at a glance and doesn't rely on color alone, so it stays clear for color-blind users. On larger assemblies, connection points far from where the shopper is working fade back so the area they're building stays uncluttered, and the rest of the red points dim while one is locked on so the green target is unmistakable.
Camera Behaviour in Preview and Share
By default, the camera automatically reframes to fit all placed modules in view every time a module is added or connected — this is the Auto-Reframe on Module Connect setting found in Project Settings → Camera. It fires for all placement methods: clicking to add the first module, snapping a module to another via click, and both drag-first and drag-snap placements.
| Setting | Default | Description |
|---|---|---|
| Auto-Reframe on Module Connect | On | Automatically adjusts the camera to keep all placed modules in view each time a module is added or snapped in Preview or Share. Applies to all placement methods. |
Performance: Drag Ghost Preview
The Show Modular Drag Ghost setting (Project Settings → Loading, Modular projects only) controls whether a translucent ghost clone is rendered while the user drags a module. It is off by default.
| Setting | Default | Description |
|---|---|---|
| Show Modular Drag Ghost | Off | Render a translucent Phong-shaded ghost with wireframe overlay while dragging modules. Turn on for richer visual feedback; keep off on scenes with many placed modules for better performance. Snap indicators, cursor shape, and drop accuracy are unaffected by this setting. |
Material or Color Options for Placed Modules
In Modular projects, material and color variants can apply to placed modules globally. Use a separate Thumbnail Selector, Select Material, Dropdown, Toggle, Checkbox, or Carousel block for choices such as material, paint color, fabric color, or texture. The Modular block controls which modules are placed; the material or color option block controls how all matching placed modules look.
- 1Create the Modular block first and configure the module variants that users can place.
- 2Create a separate material or color option block, such as "Module color options" with variants like Natural, White, Grey, or Brown.
- 3Open each material or color variant, choose Material or Color, then set Target Scope to "All placed modules" or "Selected module types".
- 4Optionally select mesh parts by name to limit the option to wood, fabric, metal, or another repeated part group. Leave the parts empty to affect the full module mesh.
- 5Preview the project, place modules, and switch material or color options. The selected option is applied to existing placed modules and to modules added afterward.