Все проекты

03 · 3D-конфигуратор · Собственный проект

VaryForm 3D Configurator

Интерактивный параметрический 3D-конфигуратор стеллажей: размеры, секции, материалы, управление 3D-сценой и расчёт комплектации.

Роль
Архитектура, интерфейс и 3D: Nuxt, TypeScript, Three.js.
Стек
  • Vue 3
  • Nuxt
  • TypeScript
  • Three.js
  • WebGL
  • WooCommerce
Общий проект VaryForm: 3D-модель стеллажа, цена, экспорт PDF и DXF
Конфигуратор VaryForm: размеры, секции и материал слева, 3D-модель стеллажа и цена

Задача

Показать покупателю точную модель стеллажа, которая перестраивается при каждом изменении параметров, и сразу посчитать комплектацию.

Решение

  • 01 Параметрическая геометрия: ширина, высота, глубина, количество секций и полок.
  • 02 Материалы и отделки, которые переключаются без перезагрузки сцены.
  • 03 Управление камерой и сброс вида, режимы 3D и чертежа.
  • 04 Расчёт комплектации на основе текущей конфигурации.
  • 05 Общая ссылка на проект, выгрузка в PDF и DXF.
  • 06 Передача конфигурации в заказ WooCommerce: размеры, материал и спецификация деталей.

Результат

Работающее демо с открытым кодом на GitHub — можно покрутить модель и посмотреть реализацию.