The 3D preview allows you to provide your customers with a realistic 3D view of the product they are customizing. Augmented Reality allows them to see the product in their real-world by the mobile phone.
Index
1. Setting up a 3D/AR preview for your customizable product
Overview of the setup flow
The setup process follows 3 main steps:
-
Select the product & Upload 3D Model
In this step you:Select the product for which you want to enable the 3D/AR Preview
-
Upload the corresponding 3D model
Once the model is uploaded, based on the product structure already defined in the Zakeke catalog, the system automatically opens the correct setup flow:
Simple Product (no variants)
Product with Variants
-
Configure the 3D model
After upload and scenario selection, you proceed with the 3D model configuration.
In this step you:map the model to product sides (if applicable)
define how variants are represented (if applicable)
finalize the 3D/AR preview setup
Activate AR
1. Select the product and Upload 3D model
Go to your Zakeke back-office > 3D Preview and Augmented Reality and select the product for which you want to enable the 3D preview.
In order to create the 3D preview you need to import a 3D model for your product. You can either choose to upload an existing 3D model with all textures or import it from the 3D DAM in Zakeke if you have already got a model done there.
3D Model Guidelines
-
Use assets with the following characteristics:
- Use light and low-poly 3D models in order to ensure good performance. We suggest models that do not exceed 200,000 polygons.
-
Supported formats:
- Wavefront OBJ and MTL (.obj)
- GLB/glTF (.glb, .gltf)
- FBX
- Textures (if any) can be JPEG or PNG and should be a maximum of 1024px for Desktop and 512px for Mobile to avoid performance issues.
- Size: 6/7 MB max. For simple items such as mugs, 1–2 MB max.
Zakeke also offers a 3D asset optimizer to automatically optimize 3D models and improve performance. -
If your product has multiple sides, your 3D model must be separated into
different objects (parts)
in your 3D editor, with at least one object for each side.
Example: If you have a t-shirt with front and back sides, you must split the model into two separate 3D objects: one for the front and one for the back.
Once the upload has finished, the next steps change based on your case:
Simple Product (no variants)
See instructions
-
Product with Variants:
All variants are identical
All variants share the same shape and appearance, so a single 3D model is used for all of them.
For this case, you can follow the same instructions as for a Simple Product. See instructions
Same model, different colors/materials
All variants share the same shape, while only colors and/or materials change. One 3D model is reused across variants.
See instructions.
Different models per variant
Variants differ in shape or structure, so each variant requires its own dedicated 3D model.
See instructions.
Follow the instructions below according to your specific scenario.
Simple Product
Product without variants, with just 1 side.
But, if you're product DOESN'T HAVE variants and have just 1 side, you can simply modify the materials and colors of the base model if the shape remains the same.
For example, in the image below, you can see a Can, with just 1 side and no variants, so after you upload your 3D model, you will proceed directly to the step called Design Mapping. Go to paragraph 2.4 if you don't have Variants to manage and to follow the Design mapping guidelines.
Product without Variants, with multiple Sides.
But, if you're product DOESN'T HAVE variants and have multiple sides, you can simply modify the materials and colors of the base model if the shape remains the same.
For example, in the image below, you can see a Pillow, with just 2 sides and no variants, so after you upload your 3D model, you will proceed directly to the step called Side Association and Design Mapping. Go to paragraph 2.3 if you don't have Variants to manage and to follow the Side Association and Design mapping guidelines.
Product with Variants
Product with Variants and Sides.
If your product DOES HAVE variants and sides, the 3D model you upload will serve as the base for all product variants.
In this case you have the option to upload a specific 3D model for each variant. Once you've uploaded the 3D model and everything looks fine, click "Next" on the bottom right corner to move to the next step, managing the 3D view for each variant individually. Go to the paragraph 2.2 to follow the 3D model management for Variants guidelines.
Your uploaded 3D model is automatically assigned to all product variants, if any is available, as mentioned before.
If you have variants that affect the appearance of your product, such as materials, you can make the 3D model change based on the product variant that your customer is personalizing.
As an example: you sell a mouse pad or a t-shirt in different sizes or shapes (variants) and you want the 3D model to change according to the variant chosen by your customer.
To use different 3D models for each variant, click "Replace" to upload separate models.
Alternatively, if variants differ only in color but share the same shape, edit materials by clicking "Edit Materials".
2. Configure the 3D Model
1.3 Sides Association and Design Mapping
Sides Association and Design Mapping are essential for your 3D view to function properly. You need to complete this step to finalize your product's 3D view setup.
This step involves linking each side of your product to the corresponding mesh in the 3D model. This ensures that each 2D side is displayed in the correct position on the 3D model.
For precise visualization, use the positioning tools to move and place the design perfectly on the 3D model.
Remember, Side Association will be available as a step only if your products have sides to match to 3D model corresponding mesh, but if there is just one side, this step will be completed automatically and you will be redirected to Design Mapping instead.
1.4 Design mapping
Once you select the mesh of the model to associate it with the side, a placeholder appears on the 3D model with the side name and a border with the size of the side area. Zakeke automatically fits the side area to the UV map quadrant.
This is how the design that the users will make on the 2D image of your product will appear on the 3D preview. If you are not satisfied, edit the setting to move, rotate and scale tools to adjust the placeholder design. Click save once you're satisfied with the final result.
The same thing need to be done for all sides if needed.
1.5 UV mapping and positioning
Warning: If you notice significantly inaccurate positioning despite using positioning tools, it may indicate a problem with the UV map of the model. In such cases, we recommend downloading a reference texture and utilizing 3D modeling software to recreate the UV map for your model.
1.6 Edit Materials
1.6.1 Model Materials
You can also edit the materials of your 3D model meshes directly inside this process. By clicking on the Edit materials icon you can edit all the materials and their specifications.
This step won't be visible if your product has no variants or if the 3D model has only one material.
Please note: To change the material settings for a specific mesh, you must associate a material for it before uploading it, you can't create a material later.
1.6.2 Design Materials
By default, a design inherits the material properties of the mesh it is applied to (Model Material). This means the design uses the customization color, but its 3D appearance (metalness, roughness, reflections, transparency, etc.) comes from the underlying mesh material.
For example, if a design is placed on a highly reflective chrome surface, the design will also appear chrome-like and reflective.
Design Material allows you to override both:
The design color
The material properties of the design
This makes it possible to give the design a different appearance from the base product material, such as:
Matte print on a metallic surface
Laser engraving on metal
Any customization that should have its own material finish
The images below show the difference: by default, the design inherits the bottle's material properties, while with a Design Material it can have a completely different color and finish.
|
|
|
|
Default behavior - No Design Material applied The design inherits the material properties of the bottle, while its color comes from the customization. |
With Design Material applied The design uses its own material and color, allowing a different finish (e.g. matte print) while the bottle keeps its original metallic appearance. |
1.7 Camera Views
With Camera Views, you can control how the 3D product preview behaves in the Customizer, checkout, and other system areas.
1.7.1 Link a Camera View to a Product Side
You can associate a camera view to each product side.
This enables automatic model rotation in the Customizer 3D preview when customers switch product sides. When a side is selected, the preview camera will move to the linked camera view. See video below.
1.7.2 Use buy_screenshot_camera for Checkout and APIs
If a camera view is named buy_screenshot_camera, the system will automatically generate a 3D preview image when the product is added to cart.
This preview will be used in:
Design APIs responses
If you want to generate multiple previews, you can create additional camera views using the following naming convention: buy_screenshot_camera_1, buy_screenshot_camera_2, buy_screenshot_camera_3, ... Each camera will generate a separate preview image.
2. Augmented Reality
If enabled, an AR button appears on the UI of your customizer and your customers will be able to see your item in their real-world with their smartphones.
Remember to add the real-world height of your product in cm.
You can then decide if the product is resizable in AR, if you need a faster AR conversion (client-side) and if you allow wall placement.
Please note that augmented reality works only with the most updated Android devices that support Google Play Services for AR and Apple smartphones with iOS 12.