Project Documentation: Mockup 3D Generator

Overview

Mockup 3D Generator is a desktop application developed using .NET MAUI with Blazor Hybrid. The application allows users to create, edit, and export 3D mockups of boxes and packaging in an interactive and visual way. It is aimed at designers, e-commerce professionals, and digital product creators who need to generate 3D representations of their products easily.

The application uses the power of .NET to manage the local backend (database, files, embedded server) and web technologies (HTML, CSS, JavaScript/Three.js via Blazor) for rich 3D rendering and a modern user interface.

Architecture and Technologies

  • Main Framework: .NET MAUI (Multi-platform App UI) with Blazor WebView.
  • User Interface (UI): Blazor (Razor Components), HTML, modern CSS (with "glassmorphism" effects and advanced typography).
  • 3D Rendering: JavaScript (probably integrated with Three.js or similar library) managed by the gerador-caixa.js files and communicating with C# via JSRuntime.
  • Local Storage: Local database via DatabaseService (probably SQLite) to save project settings and history.
  • File Storage: Native file system of the device to save drafts, final projects, images, and exported HTML files.
  • Embedded Local Server: LocalServerService acts as a lightweight HTTP server to preview interactive mockups directly in the browser after export.

Current Features and Resources

1. Main Dashboard (Home Screen)

The home screen functions as the user's control center, offering:

  • Quick Actions: Prominent main button to create a new mockup from scratch or from the templates gallery.
  • Studio Tips (Tip of the Day): A dynamic card displaying useful and random tips about using the application, updated based on the selected language.
  • Recent Projects: An interactive grid listing the latest edited projects (up to 8 projects).
    • Display of thumbnails generated dynamically from the 3D canvas.
    • Visual indicator (badge) for projects that are unsaved "Drafts".
    • Context menu per project to open or delete projects directly from the dashboard.
  • Language Selector: Support for internationalization (i18n), allowing interface language changes in real-time.

2. Templates Gallery (Presets)

To speed up the creation process, the system offers a gallery of pre-defined molds managed by PresetCatalog.cs:

  • Available Categories:
    • E-commerce: Standard mailing boxes (Small, Medium, Large).
    • Cosmetics: Perfume box, facial cream, and lipstick.
    • Digital Products / Software: Classic software box.
    • Retail: Tea/infusions box.
  • Each preset automatically loads the exact dimensions recommended for that type of product, serving as an ideal starting point in the Editor.

3. 3D Visual Editor

The heart of the application. An interface divided into a control panel (on the left) and a real-time 3D viewer (on the right).

  • Dimension Controls:
    • Width, Height, and Depth adjustment in real-time via sliders or direct inputs.
    • Support for multiple units of measurement: Millimeters (mm), Centimeters (cm), and Inches (in). Conversion is managed in the backend for the correct scale of the renderer.
  • Texture Management (Faces):
    • Buttons for individual image upload for each face of the 3D model (Front, Back, Right, Left, Top, and Bottom).
    • Support for popular image formats (.png, .jpg, .jpeg, .webp).
    • Textures are converted to Base64 for instant sending without CORS issues to the JavaScript 3D engine.
  • 3D Viewer Options:
    • Auto-rotate.
    • "Explode View" tool to visualize the disassembled box.
    • Manual rotation with the mouse.
    • "Reset" button to return the camera to the initial position.
  • Auto-Save and Drafts:
    • Intelligent "Auto-Save" system running every 1 minute (via PeriodicTimer), capturing the current state and screen thumbnail to prevent data loss.
    • Secure navigation management: Modal alerts intercept the user if they try to leave the editor with unsaved changes, asking if they want to save or discard.

4. Export and Sharing

  • Standalone HTML Generation: Upon saving a project, the JavaScript engine compiles the current 3D scene into a standalone, independent .html file.
  • Asset Management: Images applied in the mockup are physically copied to an img/ folder within the project directory, ensuring the HTML file is portable and can be sent to clients or hosted on a server.
  • External Viewing: The "View in Browser" button starts the LocalServerService and opens the operating system's default browser pointing to the exported HTML file, allowing immediate viewing of the final result outside the application.

5. Localization and Internationalization (i18n)

The system was designed to be multi-language (using the LocalizationService and .resx files).

  • All interface texts, from button labels to template categories and error messages, come from resource dictionaries, allowing easy translation of the app into other languages (e.g., Portuguese, English, Spanish).

6. Subscription System (In-App Purchases) - In Development

  • Prepared infrastructure (ISubscriptionService and WindowsSubscriptionService) exists to verify subscriptions via the Microsoft Store.
  • Currently (in this version), the verification is configured to always return true or grant free access (ideal for debugging or the initial free phase of the project), but the logic for locking premium features is already structured in Dashboard.razor.

Final Considerations

The current version of Mockup 3D Generator is robust and well-structured. It unites the flexibility and scalability of .NET MAUI with the versatility of web UIs, creating a tool focused on usability. The use of temporary drafts, cache cleaning, auto-save, and clean texture manipulation via Base64 demonstrate attention to technical details that considerably improve the user experience.