The 3D preview allows you to provide your customers with a realistic 3D presentation of the product and with AR technology to be able to see it in the real world.
Setting the 3D preview for your product
Important before you start:
Before enabling the 3D preview, your product must be configured as a customizable product.
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 the 3d preview
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.
We suggest using glTF or Babylon format, if possible (you can download the export plugin for your 3D editor here, at the exporter section).
Once you upload the 3d model of your product 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.
Important: 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.
PRO TIP: 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 on Apple smartphones (iOS 12 required).
Click on "Next" and then "Save" to publish the 3d preview live.
Video tutorial of the full process
Advanced editor for 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.