Как создают 3d конфигураторы товара для сайта?

Question

[Элизабет Лоуренс]

Добрый день. Подскажите, пожалуйста, какими технологиями создают конструкторы/конфигураторы товара как на этом сайте (на модель штор накладывать разные текстуры)?
https://www.theshadestore.com/drapery/custom-drape...

Answer 1

[Иван]

не увидел там 3D конфигуратора.
HTML5+CSS+JS+SVG(вероятно).

для 3D конфигураторов есть ряд JS фреймворков.
Three.js
Babylon.js
Cocos2D
и т.д.

прочтите еще это
Чем отличаются canvas от webgl, и что лучше учить для 3d-анимации?

Answer 2

[alex-1917]

Чо там, и правда какой ТРИДЭ?
Банальный JS, такое пишется за один недлинный вечер...
Т.е. ответ на вопрос - JS_технологиями это пишется.

Плюс еще сделано формирование рисунка по ссылке, аякс во всей красе:

spoiler

https://theshadestore.scene7.com/ir/render/TheShad...
https://theshadestore.scene7.com/ir/render/TheShad...

Comments

[Элизабет Лоуренс]

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

[alex-1917]

Элизабет Лоуренс, как там на самом деле, никто не знает, но работоспособны оба варианта. Я бы делал формирование согласно выбранного клиентом набора опции,так и логичнее и занимает места на порядок меньше и предварительная работа по формированию ВСЕХ возможных вариантов не нужна.
Слияние прозрачных частей может делать и https://www.php.net/manual/ru/book.cairo.php и https://www.php.net/manual/ru/book.image.php
Я пользуюсь https://www.php.net/manual/ru/book.image.php - старый друг лучше новых двух)))

[Илья Ильченко]

Элизабет Лоуренс, может быть все намного проще, я уже встречал такое, это просто куча изображений штор которые накладываются на изображение комнаты.
рендерится белая штора и на нее текстура через multiply в фотошопе и сохраняется так много изображений с разными текстурами, или слияние 2х изображений можно сделать с помощью кода.

[alex-1917]

Илья Ильченко, да какой в одно место фотошоп?)) 2019 год на дворе... по ссылке формируется картинка, вы картинку скачайте и изучите её внимательно, там не фотошоп, там видна обработка php-библиотекой...
И слияние не двух картинок,а чууууть побольше, если вы по ссылке заходили...

[Элизабет Лоуренс]

Илья Ильченко, Дело в том, что когда ткань с рисунком/узором вы не сможете хорошо наложить текстуру, чтобы рисунок шел внутрь складок изделия. Это только на 3д модель текстура правильно ложиться, но не на двухмерные снимки.

[alex-1917]

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

Answer 3

[Михаил Бухман]

Нужен трёхмерный тулкит, вроде Three.js, Babylon.js или Verg3D. Последний кстати, это российская разработка, довольно быстро развивается + есть возможность спрашивать у них на форуме на русском языке.

Answer 4

[Владимир Серов]

Есть бесплатный для blender, погугли, забыл как называется, был опыт использования для сайта с мебелью делали модели и встраивали.