✦ Open Source  ·  Zero Install  ·  100% Serverless

Instant 3D Packaging
Visualization

Upload your artwork, set real dimensions in millimeters, and share a self-contained 3D snapshot with any stakeholder — all in a single HTML file. No CAD software, no server, no setup.

🚀 Launch the Viewer View on GitHub
davidgirnstein.github.io/3d-packaging-viewer/3D_Product_Viewer_v8.1.html
Box
Cylinder
Cup / Cone
Box  ·  Cylinder  ·  Cup / Cone Upload artwork, set mm dimensions, share instantly
Features
Everything your packaging team needs
📐

Real Millimeter Dimensions

Enter exact widths, heights, and depths in mm. The live circumference readout for cylinders means your label artwork always matches print specs.

🎨

Multi-Face Texture Upload

Upload PNG, JPG, or WebP artwork per face. Fine-tune offset, scale, rotation, flip, and opacity — per side, live in 3D.

🔵

Three Shape Types

Boxes, cylinders (can / bottle), and tapered cones (cup / vessel) with adjustable top and bottom diameters.

📦

Secondary Packaging — Tray

Overlay a configurable tray for shelf-ready packaging and multipack visualization. Adjust color, opacity, and product rotation.

💾

Project Save & Load

Save your full session — artwork, dimensions, camera — as a .json file. Reload it later to continue exactly where you left off.

🔗

One-Click Sharing

Export a fully self-contained, read-only HTML file with all artwork embedded. Share via email or Slack — opens in any browser, no viewer needed.

How it works
From zero to 3D in four steps
1

Open the viewer

Click "Launch the Viewer" above. The tool opens directly in your browser — no install, no login, no server required.

2

Choose a shape & enter dimensions

Select Box, Cylinder, or Cup / Cone and type in your real packaging dimensions in millimeters. The 3D model updates instantly.

3

Upload your artwork

Select any face or label surface and upload your artwork file. Use the offset, scale, and rotation sliders to position it precisely on the 3D surface.

4

Share with one click

Click "Export View as HTML" to generate a fully self-contained snapshot. Send the file to any stakeholder — it opens in any browser with no dependencies.

Tech Stack
100% serverless & self-contained
HTML5 — structure
CSS3 — styling & layout
Vanilla JS — logic (ES2020+, no framework)
Babylon.js — WebGL 3D rendering
IndexedDB — local image storage
localStorage — auto-save state
No backend — zero server, zero build step

Ready to visualize your packaging?

Open the viewer directly in your browser — or clone the repo and host it yourself.

🚀 Launch the Viewer Star on GitHub