This showcase demonstrate how to generate instant 3D visualizations of designs mapped directly onto products within CreativeEditor SDK. Note that 3D mockup visualization is not a native part of our CE.SDK product offering, but simply a demonstration of its extensibility. 3D mockups allow you to showcase your physical products in a more engaging and realistic way. The ability to preview designs at every step increases the likelihood of catching errors, improves the overall design and leads to higher conversions. Buyers are more likely to convert if they have visualized or interacted with the final product, 3D mockups are as close as you can come in a web to print context.

Versions

This 3D mockup editor example implementation supports Business Cards, Apparel and Base Caps. However, it can easily be adapted to support the design of stationary, pillows and casing, accessories, and ceramics.

How to use the 3D Mockup Editor

The preview automatically refreshes and reflects all changes made. Once the design is ready, you can click on the preview to access it in full screen. You can edit the texture map itself to change properties such as color or material. The mockup can be exported using the download button in the top right corner. Mockup models are encoded the glTF (GL Transmission Format) format.

Editing mockup

If you would like to make any design changes to the mockup preview, you can do so by clicking edit inside the preview window. The editor will display the same editing functions, allowing you to adjust the position, background, size, and other mockup elements. The 3D Mockup Editor is a great feature for print-on-demand and e-commerce companies moving into product personalization, allowing users to quickly and easily visualize the final product.

Attribution

This work is based on "Dipper's cap" by Nick Pekarsky licensed under CC-BY-4.0
This work is based on "White t-shirt with print" by hasar licensed under CC-BY-4.0