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.
- Setting up a 3D preview for your product
- Enabling 3D and AR
- Video tutorial
- Advanced editor for the 3D materials
Setting up a 3D preview for your product
Important before you start:
Before enabling the 3D preview, your product must be configured as a customizable product.
Use assets with the following characteristics:
Use light and low-poly 3D models in order to have good performance. We suggest models that do not exceed 200,000 polygons.
We suggest using glTF or Babylon format, if possible (you can download the export plugin for your 3D editor here, at the exporter section).
Textures (if any): can be both JPEG or PNG and should be a maximum of 1024px for the Desktop version and 512px for the Mobile version to avoid performance issues.
Size: 6/7 Mb max, for simple items such as mugs 1/2 Mb max.
If your product has multiple sides, your 3D model must be separated in different objects (parts) in your 3D editor, at least one for each side.As an example: if you have a t-shirt with front and back sides, then you must cut your t-shirt model in half in order to have two separate 3D objects for the front and the back sides.
Enabling 3D and AR
Step 1 - Uploading the 3D assets
Go to your Zakeke back-office > 3D Preview and select the product for which you want to enable the 3D preview.
You can upload both the 3D model and textures at once.
Once you've uploaded the 3D model and everything looks fine, click "Next" on the top right corner to move to the next step.
If you need to edit the materials of the 3D model, you can open the advanced editor for materials.
Step 2 - Matching the 3D model parts to the product sides
This step is visible only if your product has different sides or the 3D model is made of more than one part.
At this step, you match each side of your product with a part on your 3d model in order to have a perfect match between the 2D image and the 3D preview.
You'll be able to do it only if your 3d model is separated into different parts. Please refer to the note number 2 here for further information.
To match a 3D part to a side, select the part in the 3D model and then choose the corresponding side from the menu on the right.
A green 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, click the "Tune" icon button and use the move, rotate and scale tools to adjust the placeholder design.
Repeat these steps for all the product sides and click the "Next" button.
Step 3 and 4 - Setting the product variants on the 3D model
If you have variants that affect the appearance of your product, such as colors or materials, you can make the 3D model change based on the product variant that your customer is personalizing.
As an example: you sell a t-shirt in different colors (variants) and you want the 3D model to change color according to the variant chosen by your customer.
Just skip this step if the variants of your product are "sizes" or any other variant that does not affect the appearance of your product.
Selecting the materials for variants
This step won't be visible if your product has no variants or if the 3D model has only one material.
To make the 3D model change according to the variant, you need first of all to choose which material of the 3D model will change: you can do this by selecting the materials from the right menu in the "Select Materials" step.
When hovering the materials list, the material will turn blue in the 3D preview for a few moments to help you understand which material you are selecting.
After choosing the materials, click the "Next" button.
Setting the variants
This step won't be visible if your product has no variants.
At this step, you define a color for each material for each variant.
Click on the variant on the right list and for each material open the color picker to choose the color (or upload a texture if your variants are not colors, but they are textures).
Repeat the steps for each variant and click on "Next".
Step 5 - Augmented Reality
At this step, you enable the Augmented Reality feature for your customers. If enabled, a special 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 height of your product in cm.
Please note that the augmented reality works only with the most updated Android devices that support Google Play Services for AR and Apple smartphones with iOS 12.
Click on "Next" and then "Save" to publish the 3D and AR preview live.
Video tutorial of the full process:
Advanced editor for the 3D materials
In case the diffuse color and texture of the material are not enough, you may want to make the material transparent or add a reflection to it. If you need these special effects, click the "Edit Materials" button to enter an advanced editor for the materials of your product.
In the editor, select a material on the left menu to edit its properties.
You can edit each detail of the material like diffuse, ambient, reflections, reflectivity, emission, transparency and a lot more.
Click on "Save" in the top-right corner to confirm the changes and return to the 3D preview configuration.