ПарААвис: конструктор раскраски парашюта в 3D — от цвета секции до формы заказа
Покупатель красит 3D-модель купола цветами доступных на производстве тканей и скачивает готовую форму заказа: 11 парашютов, 7 своих моделей, каждая легче 1 МБ.
Задача
ПарААвис шьёт парашюты, и почти каждый купол заказывают в своих цветах. Цвета выбирали по форме заказа фабрики: в клетки для каждой секции и нервюры вписывали названия тканей, а как купол будет выглядеть целиком, приходилось представлять.
Нужен был конструктор прямо на странице парашюта: покрутить купол, покрасить его тканями, которые фабрика действительно шьёт, и сразу получить заполненную форму заказа.
Модели с нуля
Под каждое семейство куполов — своя модель. Наша группа 3D-моделирования построила их в Blender с нуля. Модель поделена на зоны — верх, низ, нервюры, слайдер, — а зоны на детали: отдельные панели и нервюры.
Модель и сайт говорят на одном языке. Названия объектов в модели совпадают с названиями зон в CMS, поэтому конструктор сам понимает, какую часть купола красить, без таблиц соответствия. Родственные купола делят одну модель: модель Ultimate работает для пяти парашютов.
Как работает конструктор
Зоны и детали. В режиме «зоны» один клик красит весь верх купола или все нервюры сразу, в режиме «детали» — отдельную панель. Под курсором проступает сетка той части, которая сейчас окрасится.
Только настоящие ткани. Палитра — это каталог тканей фабрики из CMS, цвета по умолчанию для каждого парашюта задаются там же. Купол можно вращать и приближать мышью или пальцем, разнести зоны, чтобы заглянуть внутрь, и сохранить картинку.
Разные купола — одна механика
Focus, Rave и Bestia: у каждого своя модель, а конструктор один
Из конструктора — в форму заказа
Кнопка с дискетой скачивает форму заказа в Excel — тот самый бланк, который раньше заполняли вручную. Сервер находит в бланке ячейки по названиям зон и деталей и вписывает туда выбранные ткани — названиями из каталога, а не кодами цветов.
Модель и CMS
// каждая деталь модели лежит внутри своей зоны: top, ribs, bottom, slider
loader.load(customizer.file, gltf => {
gltf.scene.traverse(mesh => {
if (!mesh.isMesh) return
const area = mesh.parent.name // имя зоны в модели = имя зоны в CMS
const fabric = customizer.areas[area].color // ткань по умолчанию для этого купола
mesh.material = new THREE.MeshPhongMaterial({
color: '#' + customizer.swatches[fabric].rgb,
side: THREE.DoubleSide,
})
})
})Новый купол в конструкторе — это модель из Blender и настройки в CMS, без правок кода.
Лёгкие модели
В моделях нет текстур: цвет задаёт материал, а форму — геометрия, упрощённая ещё в Blender до 15−25 тысяч треугольников. Файл модели весит от 377 до 977 КБ и загружается, только когда покупатель открывает конструктор, — сама страница парашюта от него не тяжелеет.
Ещё кейсы
odnaco.me: магазин лётной экипировки — от RiotJS к веб-компонентам
Каталог и магазин производителя парапланерного снаряжения: комбинезоны на заказ с конфигуратором, корзина, оформление и заказы — на ProcessWire, без готовой платформы. Фронтенд, начатый на RiotJS 3, переписан на нативные веб-компоненты без фреймворка.
testfly.me: полигон, на котором мы обкатываем решения, и издание о парапланерной технике
Независимые тест-драйвы парапланов, подвесок и приборов — и наш собственный сайт, на котором каждое новое решение проверяется на себе, прежде чем попасть в клиентский проект. Отсюда вышли OutputTransformer и StaticPages.
Теплохиммонтаж 3.0: с WordPress на ProcessWire
Третья версия сайта холдинга Теплохиммонтаж: переезд с WordPress на ProcessWire — с контентом, перенесённым со старого сайта, и структурой, в которой почти все сущности связаны между собой.