Как это сделано, смена текстур на фото в конструкторе кухни?

Question

[Антон Р.]

В общем хочу сделать функционал подбора столешниц для кухонь, типа такого: https://www.gramaco.com/kitchen-simulator-modern-2/ Но что-то не приходит в голову как это сделано, как по клику менять текстуру у части изображения. Можно конечно сделать кучу одинаковых картинок кухни с разными столешницами и просто менять всю картинку по клику но это как то тупо слишком, уверен тут более изящное решение. Как это сделано?

Answer 1

[Андрей Hecc]

Судя по исходникам, тут как раз самое простое и топорное решение c переключением полной картинки:

Comments

[Антон Р.]

Странно, но видимо у меня интернет слишком быстрый, я вообще не замечаю никакой загрузки новой картинки, просто текстура меняется.

[Андрей Hecc]

Антон Р., Дело в том, что они предзагружают все картинки через css.
Получается что на момент когда юзер переключает "текстуру" показывается уже предзагруженая картинка и из-за этого отсутствует видимая загрузка.




Откройте вкладку Network в DevTools, там это все можно найти. На самом деле метод очень топорный, лучше попробывать поискать другие способы реализации.
Ниже вон писали про вполне рабочий вариант. Добавить туда нормальные прелоады ресурсов, чтобы картинки заранее предзагружались и будет ок)

[Антон Р.]

Андрей Hecc, А если сделать так - те области которые нужно заливать текстурой сделать белыми, затем наложить сверху джипега прозрачный SVG-векторный объект по форме заливки и уже менять фон этого SVG объекта таким образом меняя текстуру общего изображения кухни?

Answer 2

[andand44]

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

Comments

[Антон Р.]

А если сделать так - те области которые нужно заливать текстурой сделать белыми, затем наложить сверху джипега прозрачный SVG-векторный объект по форме заливки и уже менять фон этого SVG объекта таким образом меняя текстуру общего изображения кухни?

[andand44]

Можно и в SVG, если есть такие исходники и умение грамотно работать с SVG

[Антон Р.]

andand44, просто у меня 3 опции и я пожалуй устану делать под каждое сочетание отдельный джипег.

[andand44]

Вижу, что jpg уже сделан. Его можно брать и использовать в сочетании с background-repeat: repeat; Визуально большинство существующих картинок подойдет для этого.