Please note
This article refers to how to create 3D models for the 3D Product Configurator. If you're searching for information on how to set the 3D Preview feature for your product in the Product Customizer, you need to refer to this article: 3D Preview
The Zakeke 3D Product Configurator works in real-time 3D, so you need a 3D model of your product in order to upload it in Zakeke and make it customizable by your customers.
Here below you find the guidelines on how the 3D model should be prepared to use within Zakeke.
Summary
1. 3D model specifications
1.1 Supported formats
The supported file formats for your 3D model are the following:
- Wavefront OBJ and MTL (.obj)
- BABYLON JS (.json)
- GLB/glTF (.glb, .gltf)
In addition, Zakeke supports ZIP files that include both the 3D model and relative textures, if any (If there are multiple 3D files in the zip, only the first one will be loaded)
1.2 Size
3D models should be as light as possible in order to have fast load times and good performance. We suggest creating low-poly 3D models with a maximum number of 200.000 polygons for about 7 MB.
In the image below an example of an optimized 3D model in low-poly: on the left side is the original model and on the right part is the optimized version.
1.3 Model subdivided into parts
Zakeke allows your customer to select a specific part of your product (attribute) and apply different colors or materials to it or even change that part with a different component. In order to select a specific model component, you must make sure that the 3D model is well subdivided into parts. In other words, the 3D model should not be a single block otherwise your customers won't be able to select a specific part to customize it.
This is an example of a subdivided 3D model:
- Seat (yellow)
- Pillows (violet)
- Feet (green)
- Structure (orange)
All those parts will be the customizable attributes of the sofa in Zakeke. A subdivided 3D model will then allow you to create separate customization rules for each component of the sofa (attribute) and your customers will be able to customize each component independently, as in the example below:
Option 1: add/remove cushions
Option 2: change the color to pillows and seat independently
1.4 Final recommendations
Remember:
- Your 3D model must not have animations and/or bone structure otherwise you won't be able to upload it in Zakeke.
- Only one material should be applied to each mesh. Multimaterial on single mesh is not supported.
2. Textures
Textures can be JPEG or PNG.
We suggest to have JPEG or PNG in low resolution to guarantee optimal performances. The maximum value we suggest is 1024x1024 for the Desktop version and 512x512 for the Mobile version to avoid performance issues. We also suggest to optimize textures with tools like TinyPNG.
You can also enable WebP as a format for textures. One of the key benefits of using WebP is its ability to offer high-quality images at smaller file sizes compared to traditional image formats like JPEG and PNG. This can result in faster loading times for your website, ultimately improving the user experience. Read more here for details.
You could still need to upload textures in the proper material panel inside Zakeke to see your previously created materials or you can create them from scratch inside the material editor.
Please note that when you upload your textures in Zakeke, remember that it automatically generates the resized versions for mobile. You can still replace them if you're not happy with the result.
3. UV Mapping
3.1 UV map of the 3D model
Unless you offer your customers to only change colors on your item, you need the 3D model to have a UV mapping associated otherwise personalization won't show properly on your item.
To be more specific, you need the 3D model to have a UV mapping if:
- you'll use textures in the product setup
- your customers will also able to use images, logos and texts to personalize the product
and you don't need the UV mapping if:
- your customers will be able to use only colors to personalize your item
Most of the 3D software offer the possibility to automatically generate a UV mapping for your 3D model, but you may need to change it.
Make sure you use the maximum amount of space inside the UV space (the square you can see while opening a UV mapping tool).
Here is a generic UV mapping. On the left: you can see the UV square with an example of UV mapping
3.2 Advanced UV mapping for design elements (texts and images)
Your item could be customizable with texts and/or images other than colors, materials, and parts. Zakeke offers you a specific tool to allow your customers to add texts and images that makes it easy for you to upload placeholder texts and images that your customers can replace with their own texts and images. However, you may want to offer design elements as options of configuration or not to use placeholders. In that case, you need to properly UV map your model to show the texts and images in the right places on the product and you need to proceed as explained below.
In your 3D software, duplicate the geometry of the part of the model you want to customize, split it from the rest of the 3D model, assign a new material to it, and make sure the UV mapping of that part is placed exactly in the middle of the UV Square as in Zakeke the custom images is generated starting from there.
Example of how a custom text's image should look before being imported in Zakeke.
After that just assign a transparent material (Opacity parameter inside the materials to 0) inside Zakeke. This way everything will be not visible except your custom image or text.
4. Suggested 3D software
Below is a list of software commonly used for creating 3D models that can generate models and UV mapping with the characteristics explained above:
- Autodesk Maya
- Blender
- Autodesk 3ds Max
- Pixologic ZBrush
The following softwares are commonly used for creating textures:
- Substance Painter
- Autodesk Mudbox
- Photoshop