Как реализовать универсальный онлайн-конструктор?

Question

[Мари Арти]

Есть два примера онлайн-конструкторов. Меня очень интересует frontend-часть, какими средствами ее лучше реализовать. Не сочтите за рекламу.
конструктор на канвас
конструктор по типу drag&drop

Можно ли выбрать какую-то технологию как базовую для собирания чего угодно - от машины до ручки - с кастомизацией под свой "вкус"?
Например, хочу чтобы в одном разделе у меня посетитель мог поиграться с кастомизацией тачки - тут дверь желтая, там красная, тут наклейка, полный треш. А в другом разделе другой пользователь собирал себе ручку - колпачок с ластиком в виде танчика, чернила зеленые, внешняя сторона под милитари покрашена и тд.
Какая реализация на фронтэнде подойдет под оба конструктора?

Спасибо заранее, товарищи

Answer 1

[vasIvas]

Универсальный конструктор, это 3Dmax. Удачи!

Answer 2

[xmoonlight]

Вы бы сразу думали: сколько займет расчет пересечений поверхностей нескольких полигональных коллайдеров и их взаимодействие между собой согласно их материалам с заданными физическими свойствами.
Это точно минимум: нативное 3D на nvidia CUDA PhysX.
Попробуйте для начала несколько простых объектов создать на Unity3D - посмотрите на загрузку CPU и GPU.

Answer 3

[Мари Арти]

то есть топорное решение - окрашивать части картинки в канвасе, подставляя фоны - не пойдет?

у меня просто пока одна идея такая: сделать 3 фото машины разных цветов (красная, желтая, синяя, например), порезать картинки на части (4 двери красные, 4 синие, 4 желтые) и в конструкторе просто подставлять эти куски, когда визитор выделяет переднюю дверь и жмет определенный цвет в меню.

еще мне предлагали вариант, сделать белую картинку, на ней прорезать ту часть, куда будет подставляться фон. например, вырезать силуэт футболки, и в пустоту подставлять фоны, будто меняется цвет ткани и текстура. форма при этом сохраняется, функционал выполняется. это не сработает?

Answer 4

[Anatoly Scherbakov]

Предложил бы использовать SVG.

- Рисуем в векторном редакторе модель машины, ручки, имперского истребителя.
- Даём её элементам имена: id="door", например.
- Готовим цвета и фоны.
- Подставляем нужные цвета, фоны, классы CSS с помощью JavaScript.

Конечно, возможности ограничены, но можно ведь много всякого придумать. Например, можно сделать анимацию, можно заставить части рисунка двигаться. Ещё можно скрывать и показывать разные части рисунка в зависимости от настроек, или менять их форму на лету.

Готовых решений такого рода не знаю, но в принципе, мне кажется, штука может получиться простая и интересная, достаточно удобная для многих применений.

Comments

[Мари Арти]

интересно, спасибо )