Как делается смена цвета на конструкторах мебели?

Question

[Benderm]

Здравствуйте!

Подскажите, как делается смена цвета на конструкторах мебели/интерьера? Например, меняется цвет кресла на выбранный или цвет ламината. Например, как сделано здесь - idesigner.tarkett.ru

Comments

[Ruslan Ruslanov]

вероятно применяется какой то фильтр.

[Митя ТоДаСё]

тут не знаю, а вообще можно сделать через svg+css

Answer 1

[Денис Грибанов]

При запросе комнаты с набором параметров для конфигурации мебели сервер возвращает готовую картинку (т.е. клиент сам ничего не окрашивает).

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

Comments

[Benderm]

>При запросе комнаты с набором параметров для конфигурации мебели сервер возвращает готовую картинку (т.е. клиент сам ничего не окрашивает).

Т.е. вы предполагаете, что там тысячи вариантов в виде картинок одной комнаты?

[LionG]

Benderm, Такое тоже возможно, так не надо никого напрягать рендером... но если кто то и напрягается рендером то скорее всего фронтенд.

[Денис Грибанов]

Benderm, К сожалению, реализация сервера скрыта от клиента, поэтому на этот вопрос Вам сможет ответить только разработчик этого сайта.

Answer 2

[LionG]

Подозреваю что изначально моделька черно-белая, а на нее накладывается еще один слой выбранного цвета с альфа-каналом (прозрачностью).

Comments

[Benderm]

Тоже так думал, но там меняется паттерн ламината. Например

и


Т.е. меняется вся картинка.

[Rustam Bainazarov]

Benderm, ну вот вам и ответ, собственно. Либо изначально генерируется весь набор вариантов, либо, по параметру генерируется и отдается нужный по запросу. И отправляется клиенту.

Вот тут у меня по ссылке сейчас оранжевый фон, черный пол и фиолетовый диван:
idesigner-home.esignserver3.com/image?maxwidth=192...

С другого браузера открыл — стандартный вид комнаты.

Ну а back-end этого дела никто не узнает так просто. Либо же есть готовые библиотеки, но я не эксперт в этом.

Answer 3

[bespechnost]

Можно строить в threejs и менять цвет на клиенте (https://threejs.org/examples/#webgl_geometry_teapot)

Answer 4

[Catrinblaidd]

Там набор текстур вроде. В этом файле попробуйте посмотреть idesigner-home.esignserver3.com/scripts/init.js, он даже с комментариями