Задать вопрос

Как реализовать подборку ткани из базы данных в интернет-магазине?

Доброго времени суток уважаемые программисты! На сайте необходимо реализовать программу подбора ткани обивки мягкой мебели. Вот пара примеров:

1-й пример:

www.dekoria.co.uk/offer/product/364/139/737/?rf=0

2-й пример:

www.bemz.com/en-us/product-page/product/sofa-cover...

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

Вопрос только в том - как это реализовать чтобы работало в браузерах, начиня с IE 8. И с какой стороны подойти. Как на ваш взгляд? Тут используется 3D? Тогда о 8 эксплорере наверное лучше забыть и идти в ногу со временем. В таком случае, какую библиотеку лучше использовать для подобной задачи?
А если это просто обычный 2D рисунок белого цвета и на него накладывается полупрозрачная заливка?
Тогда еще проще, не нужно создавать 3D модель для каждого товара. Тогда что лучше использовать?
А может вернуть 2007 год и использовать flash? Хотя наверняка и эта технология совершенствуется. Но я краем уха слышал, что её вытесняет HTML5.
Всё таки хотелось бы сделать проще - на белом обычном рисунке обозначить области для наложения паттерна программно, а эта модель уже будет загружать из БД только паттерн и заполнять им обозначенные области. Но если без 3D моделирования тут не обойтись - пусть будет 3D. Может быть кто-нибудь знаком именно с этой системой подборки, которая в примерах?
  • Вопрос задан
  • 666 просмотров
Подписаться 4 Оценить 6 комментариев
Решения вопроса 3
@boomwest
С точки зрения web - при клике на текстуру - перезагружается большое изображение, с нужным id
cdn.dekoria.pl/image/djpg/364/364_1825.1/380/0/Beddinge-sofa-cover-long_1825.jpg
cdn.dekoria.pl/image/djpg/364/364_1568.1/380/0/Beddinge-sofa-cover-long_1561.jpg
Делается это на jquery за пол часа (jquery dom, ajax). Как вы подготовите изображения - рендер или в фотошопе - зависит только от ваших способностей
Ответ написан
2ord
@2ord
3D модели - это геморрой для всех кто им будет заниматься. Больше для заказчика, так как базу 3D моделей всегда нужно держать актуальной.
Самый простой вариант, на мой взгляд, это заранее подготовить изображения софы всех вариантов текстур и подгружать их по запросу пользователя. При этом активно использовать технологии кеширования, включая географически развёрнутый CDN.
С флэшем пора закругляться. Сегодня в нём столько дыр безопасности, что все производители браузеров ищут способы как от него избавиться. Использовать технологии HTML5, конечно, но с осторожностью, без прыти.

Для определения шаблона наложения текстуры можно использовать SVG. Фигура по контуру будет выполнять функцию обтравочной маски (clipping mask).

Добавлено
Взвесив минусы и плюсы обтравки,
SVG clipping - можно было бы делать, если бы не добавляло работы художникам и программистам.
Поэтому проще обойтись подгрузкой целевой картинки софы (без каких-либо слоёв) при помощи AJAX.
Ответ написан
engine9
@engine9
Разрабатываю интерфейсы и трехмерные презентации.
Рекомендую задать этот вопрос на форуме разработчиков blend for web. Они наши соотечественники и продукт мощный, многое умеет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@profi-69
Директор по развитию ELARBIS
А в чем собственно проблема? Возьмите готовое решение: ELARBIS - программа "переодевания" мебели.
elarbis.com - это сайт, где можно посмотреть решения, в том числе и для web.
Примеры работы программы ниже:
elarbis.assets2.izhpt.com/elarbis/Schlossatelier/i...
А это качество картинки в десктоп-версии ELARBIS
737bea7fadc04af28443660d874e7cfd.jpg4281c274b3674192afa6a500f42fc6a2.jpg2c9e10c162cd4c05bb0b3d3acd59d56b.jpg1a40cba708a041e5be99dd5e63c51e66.jpg
Если нужны подробности и условия использования, обращайтесь! Всегда рад помочь.
Ответ написан
Комментировать
Arnoldus
@Arnoldus
Полдня искал - нашел примитивнейший вариант на JS
www.forema.ru/color_3.php

Просто бери и копируй исходники
www.forema.ru/layout/js/colorselect.js

Надо только подготовить слоя
Вот примеры
www.forema.ru/uploads/color_calc/model_35.png
www.forema.ru/uploads/color_calc/model_40.png
www.forema.ru/uploads/color_calc/model_45.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы