Сборщик коробочек (Box Builder) — конструктор упаковки
Веб-инструмент для дизайнеров упаковки. Типы коробок:
- Футляр + крышка-дно — футляр (внешняя коробка) с открытым верхом и вырезами под пальцы, с европодвесом или без, и вложенная коробка крышка-дно.
Толщина картона задаётся отдельно для внутренней коробки (крышка и дно, поле «Картон внутр.») и для внешнего футляра («Картон внеш.»), 0,2–3 мм, по умолчанию 0,4; размеры крышки и футляра пересчитываются с сохранением зазоров, изменения попадают и в SVG, и в PDF.
- Коробка с язычками (RTE) — складная коробка с обратным замком (reverse tuck end, ECMA A20.20): открывается сверху и снизу, опционально с европодвесом. Язычок крышки и боковые (пылевые) клапаны считаются автоматически от размеров коробки: язычок — от глубины (10–16 мм), боковые клапаны со старта полные — доходят почти до центра, между ними 1 мм, без нахлёста (не длиннее половины высоты). В поле «Бок. клапаны, мм» сразу стоит посчитанная полная длина (пересчитывается при смене ширины/высоты); её можно уменьшить, а больше полной поле не примет — подсветится красным, как остальные размеры. Галочка «Дно с язычком-замком» (по реальной коробке): низ — как верх: крышка с язычком и боковые пылевые клапаны (один в один как сверху). Язычок-замок вырезан из самой лицевой стенки: в её кромке прямоугольный вырез, язычок сидит в нём на сгибе (вровень со стенкой, по бокам надрезы). Второй сгиб — на кромке стенки: дальше язычок идёт внутрь вдоль нижней крышки, а его конец входит в вырез на сгибе между нижней крышкой и её язычком (по центру сгиба, узкая щель шириной с язычок + 0,4 мм) заподлицо, наружу не торчит. Без клея. В развёртке — вырез с надрезами, три сгиба язычка и вырез на сгибе крышки; в 3D вырез сквозной в обеих деталях (в крышке 1,5 мм, в её язычке 0,3 мм), при вскрытии конец язычка вынимают из выреза, звено выпрямляется и язычок отгибается из выреза наружу, затем откидывается крышка.
- Футляр + лоток — открытый лоток без крышки и ложемента вдвигается в футляр сверху. На футляре сверху и снизу можно включить крышку с язычком и боковыми клапанами — одна и та же конструкция, как у RTE (галочки «Крышка сверху» и «Дно снизу», по умолчанию обе включены; длина боковых клапанов — полем «Бок. клапаны, мм»). Выключенная сторона остаётся открытой. У футляра задняя стенка продлена клапаном с европодвесом, у лотка — подвес-вклейка (клеится к задней стенке снаружи, отверстия совпадают). Ширина подвеса задаётся полем «Подвес ш., мм» (40 мм … ширина футляра); галочка «Европодвес» убирает клапан и вклейку.
- Клин (трапеция) — коробка-призма: задняя стенка вертикальная, лицевая наклонная, боковины — прямоугольные трапеции. Размеры: ширина, высота сзади, глубина внизу и «глубина сверху» (6 мм … глубина внизу; по умолчанию 110 × 90 × 75, верх 27). Развёртка — одна полоса, как у реальной коробки по видео: крышка (язычок → задняя → верх) — лицевая — дно — внутренняя задняя стенка; боковины-трапеции сидят на лицевой, снизу на них ушки, ушки есть и у внутренней задней. Крышка закрывает верх и заднюю стенку снаружи (на ней печатается «ЗАДНЯЯ»), Крышка кончается на 1,5 мм выше нижнего сгиба; язычка и прорези нет. Внутренняя стенка снаружи не видна — печать не нужна. 3D собирается из самой развёртки по сгибам: раскладывается в полосу и обратно так же, как на видео. Допущения: размер крышки, форма ушек и прорезь подобраны по видео, не измерены.
- Крышка-дно — телескопическая коробка: крышка на всю высоту надевается на дно. Толщина картона настраивается полем «Картон, мм» (0,2–3 мм, по умолчанию 0,4): крышка пересчитывается так, чтобы зазор остался ≈ 0,3 мм на сторону, а под размерами показывается внутренний размер под товар. Картон толще 1 мм — развёртка только как схема размеров.
Что умеет
- Размер под любой товар. Вводите ширину × высоту × толщину внутренней коробки — крышка и внешняя коробка пересчитываются автоматически, 3D перестраивается.
- Вырезы под пальцы на боках внешней коробки (ширина и глубина настраиваются).
- Развёртка в SVG и PDF под текущий размер: вырубка, биговка, вылеты 3 мм, безопасная зона, подписи сторон — всё отдельными слоями для Illustrator.
- Примерка дизайна в 3D. Загрузите макет (PDF, PNG, JPG, SVG), сделанный на скачанной развёртке, — он ляжет на все стороны коробки. Можно просто перетащить файл на 3D.
- Анимация вскрытия: коробка вытягивается за вырезы, крышка снимается.
Приватность
Загруженный макет хранится только в браузере того, кто его загрузил (IndexedDB), и никуда не отправляется. «Убрать дизайн» удаляет его. Размеры коробки тоже запоминаются локально.
Слои в макетах (SVG и PDF)
Во всех скачиваемых макетах слои одинаковые и идут снизу вверх:
| Слой | Что внутри |
|---|
BACKGROUND | фон коробки — белая заливка области печати с вылетами |
DESIGN_PREVIEW | загруженный макет (только при «С текущим дизайном») |
BLEED | вылеты 3 мм |
SAFE | безопасная зона |
CREASE / OPTION_CREASE | биговка / биговка-опция |
CUT | вырубка |
ARROW_ZONES_NOPRINT | зоны под стрелки (только футляр) |
TEXT_ON_BOX | надписи на панелях коробки (названия сторон, размеры, «клей», «язычок») |
TEXT_SHEET_NOPRINT | заголовки листа и примечания |
LEGEND_NOPRINT | линии легенды |
Внутри каждого слоя детали разложены по подслоям с префиксом (OUTER_A_EUROHANGER_CUT, INNER_LID_TEXT и т.д.). В SVG это слои и подслои; в PDF — настоящие слои (Optional Content), видны в Acrobat; открываются ли они слоями в Illustrator — зависит от версии, для надёжной работы со слоями берите SVG.
Для новых типов коробок: слои собираются в одном месте — SVG_LAYERS и buildSVG() — из общего набора полей детали (outline, holes, bleed, printFill, panels, creases, options, zones, labels). Достаточно отдавать детали в этом формате — слои появятся в SVG и PDF сами, ничего дописывать не нужно. Текст на коробке кладите в labels, а заголовки и примечания листа — в heads/notes.
Как пользоваться
- Задайте размер → «Скачать PDF» или «Скачать SVG».
- Откройте развёртку в Illustrator, сделайте дизайн на своём слое. Не меняйте размер артборда и не двигайте развёртки.
- Скройте слои
CUT, CREASE, BLEED, SAFE, BACKGROUND (если фон не нужен) и все *_NOPRINT и экспортируйте PDF/PNG по артборду.
- Загрузите файл кнопкой «Загрузить макет» — смотрите результат в 3D.
Публикация на GitHub Pages
- Создайте репозиторий (
box-builder) и загрузите в него все файлы из этой папки (Add file → Upload files).
- Settings → Pages → Source: Deploy from a branch, ветка
main, папка / (root) → Save.
- Через 1–2 минуты сайт будет доступен по адресу
https://design-dmitriev.github.io/box-builder/.
Всё работает без сервера и сборки: библиотеки лежат в vendor/ (three.js, clipper, jsPDF, svg2pdf.js, pdf.js).
Пределы размеров
Пределы — реальные, из геометрии деталей, а не произвольные:
- Минимумы (ниже контур вырубки ломается): футляр — ширина 6, высота 17, толщина 6 мм; RTE — ширина 13, высота 21, глубина 8 мм; крышка-дно — 7 × 7, высота 6 мм; клин — ширина 20, высота сзади 22, глубина внизу 20 мм. Причины: клеевой клапан скошен на 10 мм с обеих сторон, клапаны RTE рисуются с уступами 4/6 мм, лотки крышки-дна сужаются на 3 мм с каждой стороны.
- Сверху геометрия не ограничивает; стоит только защита от опечаток (2000 мм). Если лист развёртки больше B1 (700 × 1000 мм), под размерами появится предупреждение — уточните формат у типографии.
Параметры конструкции
- Картон 0,4 мм. Крышка = дно + 1,4 мм по ширине и высоте. Внешняя коробка = крышка + 2 мм.
- Внешняя коробка: открытый верх, глухое дно (склейка), клеевой клапан 13 мм.
- Перед печатью сверяйте развёртку со штампом типографии.
Для Figma
Кнопка «Для Figma» скачивает SVG с теми же слоями (CUT, CREASE, BLEED, TEXT…), но размер задан в пикселях при 72 dpi: 1 px = 1 pt, 1 мм = 2,8346 px. Перетащите файл в Figma — рамка получит нужный размер, а PDF, экспортированный из Figma, будет в натуральную величину. Формат .fig закрытый, поэтому отдаём SVG. Figma работает только в RGB; перевод в CMYK пока не реализован.
