Logo
Logo
Retap - Направи твоята 360° бутилка!.
Retap - Направи твоята 360° бутилка!. Retap - Направи твоята 360° бутилка!

Време за четене: 1 Минути

Използвани технологии:

blender webpack three-js gs

Уеб приложение

Мисията на Retap е да сведе до минимум консумацията на пластмасови бутилки за еднократна употреба. Продуктите Retap, произведени в Дания, имат 4 награди за дизайн и екология в над 60 страни по света!

Задача

Продуктите Retap са дело на трима датски ентусиасти, които мечтаят да направят света по-добър, като помогнат на хората да намалят пластмасата в ежедневието си. През 2009 година те се обединяват и опитват да изобретят най-добрата до момента в света стъклена бутилка за вода - като материал, форма, технология, екология. Една година и много дизайни по-късно, през лятото на 2010 г., пускат Retap Bottle. 

Тя прилича много на капка вода и заслужено е отличена с няколко световни награди за дизайн и екология - The Red Dot Design Award и Promotional Gift Award през 2011 г, както и Good Design Award през 2012 г. и ECO SKANDINAVIAN AWARD.

Вярваме, че със своята елегантност, изтънченост и иновативност, бутилката Retap заслужава подходящо онлайн представяне.

Процесът

Създадохме Landing страница, на която интерактивно и с помощта на 3D модели на продуктите, да можеш да разгледаш своята бутилка, да я персонализираш и поръчаш.

Направихме, така че потребителите да имат възможност в реално време да сменят цвета на своята избрана капачка или калъфче и да виждат как реално биха изглеждали те на бутилката. Разбира се, цветовете са ориентировъчни.

Оптимизирахме целия процес в няколко стъпки:

1. Избор на размер бутилка (0.300л, 0.500л, 0.800л)

2. Избор на цвят на безплатна капачка

3. Опция за добавяне на калъфче и избор на цвят

4. Преглед на поръчката

5. Завърши поръчка

По време на цялото преживяване по създаване на своята Retap бутилка, потребителите имат възможност да научат повече за продукта и неговите аксесоари, при преминаване с мишката през ховър полета.

На последната стъпка от конфигурирането на продукта, има възможност за разглеждане на бутилката в 360°.

След като си създал перфектната за теб бутилка, можеш да преминеш към бутона “Завърши поръчката”, който те отвежда директно в сайта на Retap, където можеш да си я купиш.

Предизвикателства, пред които сме се изправяли в процеса на работа

Едно от предизвикателствата, с което се сблъскахме, беше да направим 3D модела на бутилката достатъчно реалистичен, но и оптимизиран, за да не появлияе негативно на скоростта на сайта. Пробвахме доста варианти, докато постигнем баланса между бързина и реализъм, особено когато имаме в предвид, че сайтът трябва да работи перфектно на мобилни устройства, без затруднение.

Интересни факти

Анимациите на 3D модела се случват изцяло с GSAP и Scrolltrigger, което ни дава пълен контрол над това какво се случва на отделните резолюции.

Отраженията върху бутилката са постигнати с т.нар Cube map за Three.js. Това са 8 снимки подредени в кутия, които излъчват естествена светлина. По този начин се избягва използването на тежките изкуствени светлини, които Three.js предлага.

Цветовете на всяка капачка и калъфче винаги преливат от стария цвят до новия избран. Този подход придава много по-завършен вид при смяна на цвета.

Следващ
Проект

Разгледай проекта!
MaxAuto24.
Back to top