Developed a web-based graphic editing system that connects 2D design tools with interactive 3D product visualization.

The editor allows users to work with images, text, colors, and textures in a 2D workspace while previewing the results directly on 3D models, such as advertising boards, display stands, and exhibition structures.

I collaborated with a backend developer on this project. My responsibilities covered the 2D editor and the complete 3D visualization and interaction functionality.

The main engineering challenge was connecting two different editing environments: a 2D design canvas and a 3D model viewer.

Design changes needed to appear on the appropriate surfaces of a 3D model without requiring users to manually recreate their work in the 3D environment.

Different models also had different internal structures. The system needed a consistent way to identify editable model components and associate them with the corresponding design content.

Developed the 2D editing interface using Fabric.js, supporting:

Image and texture editing

Text placement and editing

Image cropping

Color adjustments

Design composition within the editing canvas

These capabilities provided the foundation for creating and modifying visual content before applying it to 3D objects.

Developed the 3D visualization and interaction functionality using Three.js.

The viewer supports loading 3D models representing physical display products and presentation structures.

Users can inspect how their designs appear on the corresponding model surfaces while working in the 2D editor.

Implemented the connection between 2D editing results and 3D model materials using UV coordinates and texture mapping.

Changes made in the 2D workspace can be reflected on designated surfaces of the 3D model, providing immediate visual feedback.

This creates a connected design and preview workflow without requiring separate manual texture preparation for every update.

Implemented model structure inspection to identify internal nodes and generate selectable component lists.

Established naming and organization conventions for model nodes, allowing different 3D models to be connected to the editing workflow through a consistent mechanism.

This reduced the need for model-specific interaction logic when integrating compatible assets.

Built a connected 2D editing and 3D visualization workflow that enables users to edit visual content and preview its appearance on physical display models.

The project demonstrates practical experience with browser-based graphical editors, interactive 3D applications, model structure handling, and real-time texture updates.

My contribution focused on turning these separate technical capabilities into a usable, integrated editing experience.

Fabric.js · Three.js · JavaScript · 2D Canvas Editing · 3D Model Interaction · UV Mapping · Texture Mapping