3D Mockup Editor
Integrate CE.SDK with 3D libraries for real-time, interactive design previews on products. Enhance accuracy and boost conversions with lifelike visuals.
This demo 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 demo 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
This demo 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 demo 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
Related Demos
Mockup Editor
Easily visualize the final product with the Mockup Editor. Suitable for apparel, postcards, posters, business cards, and social media product designs.
Multi Image Generation
Generate multiple image variants for a single data point.
Image Set Generation
Generate a batch of images from a set of data, for instance team cards.