User guide

3D Editor user guide

Train-a-designer walkthrough of the PacFully editor: chrome, dimensions, materials, artwork, views, export, save/share, and the real keyboard shortcuts from the codebase.

Live editor: https://pacfully.in/editor/mailer-box. No account required to explore.

1. Opening a template

From mockups

Open /mockups, pick a card (e.g. Mailer Box). Each card links to /editor/[templateId]. You can also hit /editor (defaults to mailer-box) or deep-link any catalog id.

Mockups gallery with mailer box entry point
Mockups gallery — click through to the parametric editor.
Full editor after opening mailer-box
Editor after open — mailer box with default dimensions.

2. Viewport chrome

The shell is fixed full-viewport:

  • Top toolbar — logo, template menu, undo/redo, left/right panel toggles, save, share, export.
  • Left asset panel — Upload, Logo, Prints, Colors, Symbols, Text, Patterns, Import 3D.
  • Center canvas — 3D (R3F), Dieline SVG, or Split.
  • Right properties — dimensions, material, thickness, finish, lighting, background.
  • Bottom view toggle — 3D / Dieline / Split.
Editor toolbar close-up
Toolbar strip — template switcher, history, panel toggles, save/share/export.
Left asset panel close-up
Left asset panel.
Right properties panel close-up
Right properties panel.

3. Collapse / focus mode

Verified shortcuts in EditorShell.tsx:

  • [ — toggle left asset panel
  • ] — toggle right properties panel
  • F — focus mode (collapse both; press again to restore)

Toolbar buttons mirror the same actions (titles mention [ / ]). Prefs persist in localStorage key pacfully:ui:panels. On narrow viewports only one overlay panel stays open at a time.

Editor in focus mode with both sidebars collapsed
Focus mode — sidebars collapsed to rails so the canvas dominates.

4. Templates, dimensions, materials, finishes

  • Template menu — switch among all 11 catalog entries without leaving the editor.
  • Dimensions — Width / Height / Depth in mm (decimals allowed). Canonical clamp 1–3000 mm.
  • Material — depends on template (e.g. cardboard / kraft / corrugated for boxes).
  • Thickness — 0.2–1 mm slider on box structures.
  • Finish — matte / gloss / soft-touch / foil (where listed).
  • Lighting — studio / softbox / dramatic / outdoor presets + contact-shadow toggle.
  • Background — solid color, named gradient preset, or uploaded image.

Changing dimensions rebuilds the 3D mesh and the dieline in the same Zustand commit — the product’s killer feature.

Properties panel showing dimension fields
Properties — L/W/H, structure, finish, lighting, background.

5. Package / panel colors

Open the Colors tab. Each printable panel has a color field. Tints override the material base; reset clears back to stock. Transparent artwork lets this underlay show through.

Colors tab with per-panel pickers
Colors tab — per-panel package color underlays.
3D box after applying a package color
Viewport after setting a warmer panel tint.

6. Artwork upload per panel

  1. Select a panel in 3D (click a face) or in the dieline.
  2. Use Upload (drag-drop or file picker). Max 25 MB; non-images rejected.
  3. Artwork composites over the package color on an offscreen canvas, then maps to the panel.
  4. Under Placed artwork, select an item to edit Panel, Offset X/Y, Scale, Rotation.

Repeat for multiple panels — each artwork row targets its own panelId.

Artwork applied to the mailer front panel
Uploaded mark composited onto the front panel.
Placed artwork controls for offset scale rotation
Placed artwork controls — panel target, offsets, scale, rotation.

7. Undo / redo

  • Toolbar undo/redo buttons
  • ⌘Z / Ctrl+Z — undo
  • ⇧⌘Z / Ctrl+Y — redo

History keeps up to 50 in-memory entries with ~900 ms coalescing per control. It resets on full reload; autosave keeps the latest snapshot only.

8. Open / close lid

On animatable box templates, a floating control toggles lid/flap open state. The mesh lerps animatables each frame — not a separate animation timeline.

Mailer box with lid open animation
Lid open on the mailer — flaps interpolate toward the open pose.

9. Import GLB / glTF

Asset panel Import tab accepts self-contained GLB / glTF up to 25 MB. External-buffer .gltf, Draco/KTX2, and non-glTF formats are rejected. Large imports (>~1.5 MB) are session-only — not embedded in share links / cloud sync.

Import 3D tab in the asset panel
Import 3D — GLB/glTF drop zone and scene object list.

10. Views: 3D · Dieline · Split

Use the bottom pill (ViewToggle) to switch. Split mounts both panes side by side. Panel selection is shared across views. See the Dieline guide for structure detail.

3D view mode
3D view.
Dieline view mode
Dieline view.
Split view mode
Split — design mockup and blank together.

11. Export dialog

Toolbar Export opens a modal. Every row shows a plan badge up front:

ExportGate (UI)Notes
PNG 1KFreeWatermark + banner on free
PNG 2K / JPGLiteWebGL snapshot
PNG 4KProWebGL snapshot
Dieline SVGLiteTrue vector
Dieline PDFProBrowser print sheet — not a generated vector PDF file
Dieline DXFProR12, mm, CUT/CREASE/BLEED/DIMS
Share linkFreeURL state; large art stripped
Embed iframeBusiness&embed=1 chrome

Client-preview: the dialog’s Plan preview switcher changes the Zustand plan locally. There is no live billing enforcement. Use it to evaluate UX — do not treat it as a purchase.

Export dialog with plan badges
Export dialog — gates labeled on every row.
Export dialog with Pro preview unlocking rows
After selecting Pro in Plan preview, locked rows unlock in the browser only.

12. Save & share

  • Save — always writes localStorage pacfully:project:[templateId]. When logged in, also POSTs/PUTs /api/projects (free tier: max 3; 403 falls back to local-only notice).
  • Share — copies /editor?state=… link. Warns when artwork was stripped for URL size.
Dashboard listing cloud-saved projects after login
Cloud projects resurface on the dashboard after account save.

13. Keyboard shortcuts (verified)

KeyAction
⌘Z / Ctrl+ZUndo
⇧⌘Z / Ctrl+YRedo
[Toggle left asset panel
]Toggle right properties panel
FFocus mode (both panels)

Shortcuts are ignored while focus is in an input, textarea, select, or contenteditable field. No other editor hotkeys are registered in EditorShell.

Next

Continue with the Dieline user guide for cut/crease literacy, bleed, and vector export practice.