3D Preview [OLD VERSION]

IMPORTANT

Please note that a new version of the 3D preview was released on February 26, 2020 (guide here). This guide is valid only for 3d previews activated before that date as this is a deprecated feature.

Introduction

Zakeke allows you to show your users a real-time view of the customized product in 3D.

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 no time.

• When designing or loading the 3D model to use, please remember that 3D preview works on both desktop and mobile devices, so you need to strike a balance on model quality to prevent mobile users from downloading heavy 3D models or avoid low-end devices to crash.

• Zakeke currently supports OBJ and glTF formats for the 3D model, exportable from almost any 3D modeling software. However, OBJ files exported by SketchUp may give you issues.

• 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 the setup.

• Zakeke uses material separation to distinguish the different areas of the product. For example, for a t-shirt with front and back views we will have a 3D model with two materials t_front e mat_back, even if they use the same texture and colors.

• 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.

In this guide, we will use as an example a t-shirt with front and back sides.

 

Uploading a 3D model

Let's start from the 3D Preview step of the product configuration process. 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'll see a screen with a 3D model viewer on the left and a list of sides on the right.

STEP 1 - 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.

1. Click and drag the mouse in the 3D viewer to rotate the model

2. Click on the material that you're interested in, for example 'lambert2SG' (it will change color by passing the mouse over it)

3. Select 'Fronte' side from drop down related to material 'lambert2SG'

4. Repeat the procedure for the 'back' side or any other remaining side. Once finished click on STEP 2

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.

  1. For solid color, just click on the square below and a color picker will be shown.

  2. The neutral texture is the same as the solid color, but the texture loaded at the beginning will be shown.

  3. 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.

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.