Как бы вы делали такой конструктор?

Question

[ivkol]

Подскажите, как бы вы делали такое design-your-ring.com/configurator.php
Много настроек, сложные связи, непростая генерация изображения.
Поделитесь ссылками на статью/книгу с разбором решения
Спасибо

Comments

[yociyavi]

Видимо там генерация происходит на сервере. А. фронтенд представляет из себя обычный фильтр.

[Антон Федорян]

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

[ivkol]

читайте вопрос

[Никита]

ivkol: Читайте книги

Answer 1

[Антон Мудренок]

Судя по их коду и по тому, как они все делали "в лоб", то никакого генератора изображений нет. Чуваки просто в 3dmax сделали 200 кейсов и аяксом через jquery их грузят. При чем они не стесняются писать даже так:

if(item['country'] == 'DE' && de == false){
    nearestStores = nearestStores+('<li class="country countryactive countryplus" id="listtop"><span style="float:left;"><h2>GERMANY</h2><span class="zipcodelinkbox"><span class="label">zip areas:</span><ul id="zipcodes" class="zipcodeslist"></ul></span><span style="clear:both;">&nbsp;</span></span><a href="#others" class="jumpdown"><span>Addresses worldwide</span></a><span style="clear:both;">&nbsp;</span></li>');
    de = true;
}

Какие-то ангуляры, реакты, handlebars-ы, ООП... Зачем?))) appendChild и поехали.
На сервере похоже самописная CMS. Короче тут никаких хитростей и структур нет, просто куча условий if-else.

Comments

[Денис Букреев]

Да ладно?
А как объяснишь выбор камня?
Тогда у них на сервере более миллиона сгенерированных изображений хранится

[MegaMufa]

Денис Букреев: это не такая уж проблема. В большенстве случаев это оптимальней, чем генерировать на лету.

[Антон Мудренок]

Денис Букреев: кольца и камни могли отрендерить отдельно. Если вы впихнете камни, то у них будет серый цвет фона. Если примените другой цвет к кольцу, камни останутся на том же сером фоне.
design-your-ring.com/images/ba6c188b2bce2cfe6d23b4...

[Антон Мудренок]

Денис Букреев: хотя все равно кейсов очень много, положение камня можно двигать в свободной форме. Похоже таки сервак чето делает, но судя по ошибкам и неточностям, это все таки компоновка изображений через какой-то Adobe XXX. А никак не рендер 3d изображений налету на php.

Answer 2

[xmoonlight]

Three.js ONLY!

Comments

[Александр Таратин]

Металлический эффект как ни крути нормально не настроить в Three.js на стандартых шейдерах (все как пластик будет выглядеть), лучше взять
playcanv.as/b/FQbBsJTd
playcanv.as/p/nL1dYbMv