Zakeke allows you to show your users a three-dimensional preview of your product. They will be able to enlarge and rotate the model at any angle.
Before you start, here are some important things you should know about 3D previews:
- Zakeke's 3D preview uses a real-time graphics engine that works directly on the user's browser. This means that the user will be able to rotate and watch the model with maximum fluidity, without slowing down. The changes that the user makes will be updated on the model in a few moments.
- When designing or loading the 3D model to use, please remember that 3D previewing works on both desktop and mobile devices, so you need to strike a balance on model quality to prevent mobile users from downloading heavy-duty 3D models or blocking low-end devices.
- Zakeke currently supports OBJ format as a 3D model, exportable from almost any modeling software.
- Make sure that the 3D model does not have too many polygons,that it is correct (without rats-nest, etc.) and has the correct UV mapping for the sides.
- Do not use shaders or other special effects on materials during modelling as they are not supported by Zakeke. You can add a reflex or transparency effect during setup.
- Zakeke uses material separation to distinguish the different areas of the product. For example, for a t-shirt with front and back we will have a 3D model with two materials t_front e mat_back, even if they use the same texture and colors.
In this guide we will use as an example a t-shirt with ' front' and ' back'.
Loading a 3D model
Let's start again from the 3D PREVIEW step of a product configuration. In this screen you will select the various components of the 3D model:
- the OBJ file
- the MTL file, if any
- the textures, if any
Click on UPLOAD 3D MODEL to upload the file.
You will see a screen with a 3D model viewer on the left and a list of sides on the right.
Connecting 3D materials to 2D sides
In this screen, we will link the 3D model areas with the 2D product sides, for example we will connect mat_front with the 'Front' area and mat_back with the 'Back' area.
- Click and drag the mouse in the 3D viewer to rotate the model
- Click on the material that you're interested in, for example 'lambert2SG' (it will change color by passing the mouse over it)
- Select 'Fronte' side from drop down related to material 'lambert2SG'
- Repeat the procedure for the 'back' side or any other remaining side. Once finished click on STEP 2
Recoloring the 3D model according to the variants
In this screen we need to recolor the 3D model according to the 2D variants. For example, if our t-shirt has 3 colours (blue, red and white) we have to change colour and/or texture to the various materials to reproduce these variations.
- Select a variant from dropdown, for example 'Red'.
- Click on a material in the 3D viewer, for example 'lambert2SG'.
On the right side, you will have to choose whether that material for that variant should be of a solid colour, have a neutral texture and recolor it or a texture of the right colour. In our case we already have coloured textures.
- For solid color, just click on the square below and a color picker will be shown.
- The neutral texture is the same as the solid color, but the texture loaded at the beginning will be shown.
- For colored textures, click on UPLOAD TEXTURE and choose a file.
- If necessary, we move the transparency or reflexivity sliders to obtain their effects.
- Repeat previous steps for remaining variants and then click on STEP 3.
Adjusting textures to sides
After recoloring the model and indicating which sides are linked to the various materials, it is necessary to reposition the sides on the material.
This is due to the fact that the 2D image of the side does not always match with the texture used by the 3D model and it can produce a distortion or an incorrect location of user customization on the preview.
The next image shows how a user customization can be right or wrong in the preview depending on the adjustment.
To adjust the side to the texture:
- Select variant for example 'Red'
- Select the side from dropodown for example 'Fronte'
- On the right side, drag and drop the rectangle containing the image of the side and adjust it on the texture in the correct position as in the following image.
- Repeat previous steps for remaining variants or alternatively you can clone the texture adaptation by clicking on 'APPLY ON ALL VARIANTS'
This is the required final result:
Click NEXT and save the product
FAQs and specific cases
- OBJ files exported with SketchUp can produce problems
- It is not possible to use patterns or tiles for textures that will be used for customization, otherwise the customization will be repeated.
- For metallic materials without texture, such as rings or bracelets, UV mapping is required. You can use a temporary texture to set UV mapping and then remove it in Zakeke using the 'Solid Color' type.