3D Models
Manage 3D model files, stock materials, mats, and frames for live product previews in the Print Editor.
The 3D Models page lets you upload and configure 3D model files used for live product previews in the Print Editor. PrintNow supports 3D models created with Boxshot software or other tools like Blender that can export OBJ models. A common use case is print packaging products like boxes and other folded dimensional products, but there are many other potential applications for 3D models with web-to-print.
The page is organized into four tabs: 3D Models, Stock, Mats, and Frames. The 3D Models tab manages the OBJ/MTL model files themselves, while Stock, Mats, and Frames define the physical materials and accessories that can be applied to products in the 3D preview.
3D Models Tab
The 3D Models tab displays all uploaded model files in a searchable, paginated grid.
- From your Unified Admin, go to Products > 3D Models.
- Use the search bar in the top right to filter models by name.
- Click Add 3D Model to upload a new model.
3D Models Grid Columns
| Column | Description |
|---|---|
| Id | Unique identifier for the 3D model. |
| Name | The display name of the model. |
| Background Color | The hex fill color used as the default background behind the 3D preview. |
| Applet Width | The width dimension of the 3D preview applet in pixels. |
| Applet Height | The height dimension of the 3D preview applet in pixels. |
| Action | Menu with Edit, Delete, Download OBJ, and Download MTL options. |
Add/Edit a 3D Model
Click Add 3D Model from the list view, or choose Edit from the action menu on an existing model.
| Field | Description |
|---|---|
| Name | Required. The display name for this model. |
| Model File (OBJ) | The 3D geometry file. Accepts .obj and .jar formats. Required when creating a new model. |
| Program File (MTL) | The material/texture definition file. Accepts .mtl and .jar formats. Required when creating a new model. |
| Fill | Required. The default background color (hex value) displayed behind the 3D model in the editor preview. Use the color picker or enter a hex code directly. |
| Applet Width | Required. The width of the 3D preview applet in pixels. Must be a whole number. |
| Applet Height | Required. The height of the 3D preview applet in pixels. Must be a whole number. |
| Meson Code | Required. Configuration code for the 3D viewer. Controls auto-rotation, background gradients, and background images. See optional parameters below. |
| Upload Pages | Override texture names for custom upload products. For multiple textures, separate names with a comma. |
Meson Code Parameters
The Meson Code field accepts optional configuration parameters:
'AutoRotate':true,
'BackgroundColor1':'#eeeeee',
'BackgroundColor2':'#999999',
'BackgroundImageUrl': 'Insert base64 output here'- AutoRotate -- Set to
trueto enable automatic rotation of the model. Defaults tofalse. - BackgroundColor1 and BackgroundColor2 -- Create a gradient background. Overrides the Fill color when both are set.
- BackgroundImageUrl -- Load a base64-encoded image behind the model.
Assigning a 3D Model to a Product
- Go to Products and select the category containing the target product.
- Edit the product and navigate to the Print Editor tab.
- Change the Preview Type and select the desired 3D model from the dropdown.
- Click Save.
- Publish the product and test the model on the storefront to verify accuracy.
Stock Tab
The Stock tab manages substrate materials (paper stocks, acrylics, etc.) that can be assigned to products for realistic 3D previews. Stocks define the physical properties like thickness, color, and edge treatment.
- Select the Stock tab.
- Use the search bar to filter stocks by name.
- Click Manage Tags to edit category tags, or click Add Stock to create a new stock material.
- Drag rows to reorder the display sequence.
Stock Grid Columns
| Column | Description |
|---|---|
| Id | Unique identifier for the stock. Drag this column to reorder rows. |
| Sort | The current display order position. |
| Preview | Thumbnail image of the stock material. |
| Name | The display name of the stock. |
| Category Tag | The category tag used to group stocks for easy assignment to products. |
| Action | Menu with Edit and Delete options. |
Add/Edit a Stock
Click Add Stock from the list view, or choose Edit from the action menu on an existing stock.
| Field | Description |
|---|---|
| Name | Required. The display name of the stock material. |
| Category Tag | A tag to group this stock with similar materials for easier assignment. |
| Thickness | The thickness of the stock material in the selected unit of measure. |
| Acrylic? | Check this box if the stock is an acrylic material. Enables the acrylic thickness field. |
| Acrylic Thickness | The thickness of the acrylic layer, if applicable. |
| Print Method | The printing method used on this stock. Options: Standard or Direct. |
| Units | The unit of measurement for dimensions. Options: Inches, Feet, Millimeters, Centimeters, Meters. |
| Min Height | Minimum allowed height for this stock material. |
| Max Height | Maximum allowed height for this stock material. |
| Min Width | Minimum allowed width for this stock material. |
| Max Width | Maximum allowed width for this stock material. |
| Display Order | Controls the sort position in the stock list. Lower numbers appear first. |
| Color | The base color of the stock material, used in the 3D preview. Click to open the color picker. |
| Edge Mode | Controls how the edge of the stock renders in 3D. Options: Normal, Colored, Wrap, Mirror. |
| Edge Color | The color of the stock edge when Edge Mode is set to Colored. Click to open the color picker. |
| Thumbnail | Upload an image (JPG, PNG, BMP, SVG) as the stock preview in the list view. Click the attach icon to upload, or the download icon to save the current image. |
| Face Texture | Upload a texture image for the front face of the stock in the 3D preview. |
| Edge Texture | Upload a texture image for the edge of the stock in the 3D preview. |
Mats Tab
The Mats tab manages mat board materials used for framing and mounting in 3D product previews. Mats define thickness, overhang, and texture properties.
- Select the Mats tab.
- Use the search bar to filter mats by name.
- Click Manage Tags to edit category tags, or click Add Mat to create a new mat.
- Drag rows to reorder the display sequence.
Mats Grid Columns
| Column | Description |
|---|---|
| Id | Unique identifier for the mat. Drag this column to reorder rows. |
| Sort | The current display order position. |
| Preview | Thumbnail image of the mat material. |
| Name | The display name of the mat. |
| Category Tag | The category tag used to group mats for easy assignment to products. |
| Action | Menu with Edit and Delete options. |
Add/Edit a Mat
Click Add Mat from the list view, or choose Edit from the action menu on an existing mat.
| Field | Description |
|---|---|
| Name | Required. The display name of the mat. |
| Category Tag | A tag to group this mat with similar materials for easier assignment. |
| Thickness | The thickness of the mat in the selected unit of measure. |
| Overhang | The amount the mat extends beyond the edge of the artwork or stock. Controls how much border is visible around the print. |
| Units | The unit of measurement for dimensions. Options: Inches, Feet, Millimeters, Centimeters, Meters. |
| Min Height | Minimum allowed height for this mat. |
| Max Height | Maximum allowed height for this mat. |
| Min Width | Minimum allowed width for this mat. |
| Max Width | Maximum allowed width for this mat. |
| Display Order | Controls the sort position in the mat list. Lower numbers appear first. |
| Color | The base color of the mat, used in the 3D preview. Click to open the color picker. |
| Thumbnail | Upload an image (JPG, PNG, BMP, SVG) as the mat preview in the list view. |
| Face Texture | Upload a texture image for the front face of the mat in the 3D preview. |
Frames Tab
The Frames tab manages picture frame profiles used in 3D product previews. Frames define width, thickness, overhang, recess, and texture properties for realistic frame rendering.
- Select the Frames tab.
- Use the search bar to filter frames by name.
- Click Manage Tags to edit category tags, or click Add Frame to create a new frame.
- Drag rows to reorder the display sequence.
Frames Grid Columns
| Column | Description |
|---|---|
| Id | Unique identifier for the frame. Drag this column to reorder rows. |
| Sort | The current display order position. |
| Preview | Thumbnail image of the frame. |
| Name | The display name of the frame. |
| Category Tag | The category tag used to group frames for easy assignment to products. |
| Action | Menu with Edit and Delete options. |
Add/Edit a Frame
Click Add Frame from the list view, or choose Edit from the action menu on an existing frame.
| Field | Description |
|---|---|
| Name | Required. The display name of the frame. |
| Category Tag | A tag to group this frame with similar frames for easier assignment. |
| Thickness | The depth/thickness of the frame profile in the selected unit of measure. |
| Width | The width of the frame molding (how wide the frame border appears). |
| Overhang | The amount the frame lip extends over the artwork or mat edge. |
| Recess | The depth of the recess (rabbet) where the artwork sits inside the frame. |
| Units | The unit of measurement for dimensions. Options: Inches, Feet, Millimeters, Centimeters, Meters. |
| Display Order | Controls the sort position in the frame list. Lower numbers appear first. |
| Color | The base color of the frame, used in the 3D preview. Click to open the color picker. |
| Thumbnail | Upload an image (JPG, PNG, BMP, SVG) as the frame preview in the list view. |
| Face Texture | Upload a texture image for the front face of the frame in the 3D preview. |
| Edge Texture | Upload a texture image for the edge/side of the frame in the 3D preview. |
Managing Category Tags
Each material type (Stock, Mats, Frames) supports category tags for organizing materials into groups. Tags make it easier to assign materials to products in bulk.
- Click Manage Tags on the Stock, Mats, or Frames tab.
- A dialog appears showing all existing tags as chips.
- To remove a tag, click the X icon on the chip.
- Click Save to apply changes.
Tags are shared per material type (e.g., all stocks share the same tag set). Assign a tag to individual materials via the Category Tag field when adding or editing.
Associations
Print Editor
| Area | Effect |
|---|---|
| Product Preview Type | 3D models are assigned to products via the Print Editor tab on the product edit page. The Preview Type dropdown selects which 3D model renders in the live editor preview. |
| Three.js Rendering | The Editor UI uses Three.js to render the 3D model preview with the uploaded OBJ/MTL files, applying stock textures and frame/mat configurations. |
| Material Assignment | Stock, mat, and frame materials can be assigned to product order options, allowing customers to select materials during the design process. |
Related Pages
- Products — assign 3D models to products via the Print Editor tab
- Editor Settings — configure global editor defaults that affect 3D preview behavior
- Product Setup — set the Preview Type and select a 3D model for each product