---
title: "3D Product Configurator - CE.SDK Glossary"
description: "A CE.SDK Starter Kit that extends the standard mockup experience into interactive, real-time 3D by integrating CE.SDK's design capabilities with external 3D rendering libraries."
url: "https://img.ly/glossary/3d-product-configurator/"
type: "page"
---

> This is the markdown version of [3D Product Configurator - CE.SDK Glossary](https://img.ly/glossary/3d-product-configurator/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

# 3D Product Configurator

## Definition

A CE.SDK Starter Kit that extends the standard mockup experience into interactive, real-time 3D by integrating CE.SDK's design capabilities with external 3D rendering libraries, producing photorealistic, rotatable product previews where design changes sync to the 3D model's texture map in real time.

3D rendering is not built into CE.SDK itself. This Starter Kit demonstrates the integration pattern: CE.SDK handles the design canvas and all editing interactions, while an external 3D library (such as Three.js or similar) handles the model rendering. The texture bridge between the two is what makes live design-to-3D sync possible. The pattern currently supports business cards, apparel, and caps.

## How the Integration Works

### CE.SDK Manages the Design Canvas

All editing (text input, image placement, color selection, logo upload) happens on CE.SDK's standard design canvas. The 3D preview is a read-only output surface, not an editable layer.

### Texture Map Sync

As the user edits, CE.SDK exports a rendered texture at configurable intervals. The external 3D rendering library applies this texture to the product model's UV map, updating the visible surface.

The sync frequency is configurable: updates can happen on every change event, on a debounced interval, or on explicit user action, depending on the performance characteristics of the 3D renderer in use.

### 3D Library Handles Rendering

Rotation, lighting, shadows, and camera controls are handled entirely by the external 3D library. CE.SDK has no dependency on any specific 3D renderer: the integration pattern works with any library that accepts a texture input.

## Currently Supported Product Types

The Starter Kit ships with pre-configured 3D models and UV mapping for these product categories.

### Business Cards

Design elements (typography, logos, color fills) map to the business card surface and update on the 3D model in real time as the user edits.

### Apparel

T-shirts and similar garments show artwork on the fabric surface. Placement adjustments in the design canvas sync immediately to the rotatable 3D model.

### Caps

Embroidery-style text and logo placement on cap surfaces, with real-time 3D preview showing how the design wraps around the curved form.

The integration pattern is not limited to these three product types. Any 3D model with a UV-mapped texture surface can be connected using the same approach. The Starter Kit demonstrates the pattern, not a closed set of products.

## Typical Use Cases

### Custom Merchandise Platforms

Customers see exactly how their design looks on the physical product before ordering: not a flat mockup, but a rotatable 3D object. The design canvas and the 3D preview are the same session, so there's no export-and-reimport step between designing and evaluating the result.

### Print-on-Demand with High-End Preview

Platforms competing on experience use 3D preview as a differentiator. A photorealistic, rotatable product view reduces purchase hesitation and post-order disappointment more effectively than a static image can.

### Branded Merchandise Portals

Enterprises or sports teams offering employee or fan merchandise can show a 3D preview of the customized product, reinforcing quality and building confidence in the order before checkout.

Web (Vanilla JS/TS, React, Vue, Angular, Svelte, SvelteKit, Next.js, Nuxt.js).

## Links

- [3D Product Configurator Guide](https://img.ly/docs/cesdk/react/starterkits/3d-mockup-editor-od0zz3.md): How to integrate CE.SDK with 3D rendering libraries for live product previews.
- [Live Demo](https://img.ly/demos/3d-mockup-editor.md): Try the 3D Product Configurator in your browser with a real CE.SDK instance.

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.
- **[Free Trial](https://img.ly/pricing.md)** - Start building with CE.SDK