[Всички проекти](https://88lab.eu/portfolio/) 3D БУТИК / ДЕМОНСТРАЦИОННА КОНЦЕПЦИЯ # Maison Éline Влезте в бутика. Разгледайте отвсякъде. [Посети сайта](https://88lab.eu/boutique/) Three.js / WebGL 3D продукти Виртуално пазаруване  Реален проект от портфолиото на 88Lab · Maison Éline 01 / КОНТЕКСТ И ЗАДАЧА ## Влезте в бутика. Разгледайте отвсякъде. Задачата Искахме да покажем как един **онлайн магазин** може да предаде усещането за посещение в бутик. Пространството трябва да носи собствен характер, а продуктите да могат да се разглеждат отблизо. Разходката и изборът трябва да работят както с мишка и клавиатура, така и с докосване на телефон. Решението Разработихме **Maison Éline** като собствена демонстрационна концепция: светъл 3D салон с **три зони** , интерактивни продуктови модели и отделен каталог. Посетителят може да се разходи свободно, да променя атмосферата, да избере цвят и размер и да премине през примерен процес на поръчка. Създадохме интериора, моделите, интерфейса и движението като общо изживяване в браузъра. ### Собствен интериор с три различни зони Салонът, зоната за кожени изделия и ателието са свързани в общо пространство с витрини, централна маса и места за представяне на колекцията. Мраморните повърхности, металните акценти, стъклото, текстилът и моделираните цветя изграждат светлата палитра на бутика. Геометрията и материалите са разработени за визуализация **в реално време** с **Three.js** и WebGL. ### Свободна разходка на компютър и телефон На компютър посетителят се движи с **WASD** , стрелките или скрола и оглежда пространството с мишката. На телефон използва **аналогов джойстик** и отделен жест за погледа. Добавихме плавно ускоряване и спиране, ограничаване на преминаването през обзавеждането и преходи към трите зони, които заобикалят мебелите. Режимът за свободен поглед и изгледът на цял екран допълват управлението. ### Светлина и атмосфера, които се променят Три режима показват бутика през деня, по залез и вечер. **Автоматичният цикъл** преминава плавно между тях, като променя слънчевата светлина, сенките и вътрешното осветление. Покривният прозорец и отраженията участват в усещането за обем. Началният екран показва напредъка на зареждането и отваря пространството автоматично след подготовката на текстурите и първия кадър. ### Колекция с интерактивен 360° преглед Подготвихме шест примерни продукта: две чанти, рокля, сако, парфюм и обеци, с общо **16 цветови варианта** . Всеки модел може да се върти, приближава и разглежда от различни страни. Продуктовият прозорец събира избор на цвят и размер, подробности и добавяне в селекцията. Каталогът позволява филтриране по чанти, облекло и аксесоари, а при облеклото има ръководство за размерите. ### Количка и демонстрационна поръчка Избраният цвят и размер се запазват в количката заедно с количествата и общата стойност в евро. Селекцията остава в браузъра и след презареждане чрез **локално съхранение** . Добавихме преглед на поръчката и демонстрационно потвърждение, за да се види целият потребителски път. Концепцията не приема реални плащания, не изпраща поръчки и не изисква въвеждане на лични или картови данни. 02 / КАКВО ИЗГРАДИХМЕ ## Детайлите правят цялото - 01 Собствен 3D интериор: салон, кожени изделия и ателие - 02 Свободна разходка и преходи между зоните - 03 Мобилен джойстик и управление на погледа с докосване - 04 Плавно движение и ограничаване на преминаването през мебели - 05 Ден, залез и вечер с автоматични преходи - 06 Материали, отражения, сенки и моделирани цветя - 07 Шест 3D продукта и **16 цветови варианта** - 08 **360°** въртене, приближаване и спиране на автоматичното движение - 09 Филтриране на колекцията по категории - 10 Избор на цвят и размер с ръководство за облеклото - 11 Количка с количества, варианти и локално запазване - 12 Демонстрационен преглед и потвърждение на поръчка РЕАЛИЗИРАНОТО РЕШЕНИЕ Работеща демонстрация на **виртуално пазаруване** , която съчетава атмосфера, свободно разглеждане и конкретни продуктови действия. Maison Éline показва възможностите на 88Lab за **индивидуални 3D интерфейси** и интерактивни уеб изживявания, достъпни **директно в браузъра** . ## Имате подобен проект? [Да поговорим](https://88lab.eu/contact/?service=%D0%9F%D0%BB%D0%B0%D1%82%D1%84%D0%BE%D1%80%D0%BC%D0%B8) СЛЕДВАЩ ПРОЕКТ [## VIP Матраци](https://88lab.eu/klienti/vipmatraci-bg/)