• Основен / Вдъхновение

9 брилянтни приложения на 3D в уеб дизайна

3D в мрежата наистина пристигна през 2011 г. с пускането на WebGL, JavaScript API за изобразяване на 3D графики в съвместим браузър без използване на приставки. И през следващите години видяхме много вълнение за възможностите на 3D сред уеб дизайнерите.

Този първоначален шум може да е замрял през последните години. Но развитието на онлайн 3D продължи бързо и има някои доста впечатляващи внедрения; от визуални ефекти „уау фактор“, които действат главно като доказателство за концепцията, до внимателно използване на 3D, направено с цел създаване на страхотно уеб изживяване.

В тази публикация изброяваме някои скорошни приложения на 3D в мрежата (някои малки и фини, някои блестящи и епични), за да вдъхновите вашите собствени проекти. О, и ако се използва чудесно 3D, който сте забелязали в дивата природа, моля, споделете връзка в коментарите.

01. Acko.net

Ако търсите пример за това, което базираното на браузъра 3D може да донесе в мрежата, не трябва да търсите повече от Acko.net, личния сайт на уеб разработчика Стивън Уитънс. Той се отличава с красив анимиран хедър, вдъхновен от уличното изкуство; това е проста идея, но прекрасно изпълнена.

Wittens го създаде, използвайки комбинация от CSS 3D и WebGL. „Усукването на всяка лента не се генерира произволно, а се извежда математически“, обяснява той. „Той въплъщава диференциалния принцип на паралелния транспорт. Посоката нагоре се променя успоредно на всяка крива, което означава, че лентите никога не се въртят на място. Обръщат се само когато естествено искат. Следователно дизайнът има своя воля. '

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

02. Campo Alle Comets

Откакто стартира през февруари, този уебсайт вече спечели много награди и не е трудно да се разбере защо. Създаден за популяризиране на италианското вино Campo Alle Comete, той изобразява 3D плаващ град, „където мечтите и магията най-накрая могат да се срещнат“. Въображаемите качества на дизайна, съчетани с гладкостта на изпълнението, са доста зашеметяващи и наистина е радост да обикаляте този фантастичен свят с помощта на мишката.

• 7 нови инструмента за графичен дизайн, които улесняват живота ви

Построен от италиански студия Това и Моногрид , това брилянтно използване на 3D в мрежата е създадено с помощта на WebGL и GSAP заедно с three.js и AngularJS.

03. Stripe.com

Много по-простото изпълнение на 3D, този интерактивен, въртящ се икосаедър е много ефективен при представянето на редица опции от менюто по хладен и оригинален начин. Представен на сайта за платформи за плащане Stripe, той е проектиран от Бил Лабус, въз основа на идея на Критика Мутукумар, който работи по продуктовия маркетинг в Stripe.

„Тя предвиждаше начин визуално да представи Stripe заряд от гледна точка на Radar, който използва машинно обучение, за да вкара входящи такси и да предскаже вероятността те да са легитимни или измамни“, обяснява Лабус. „Машинното обучение е доста абстрактно по своята същност, така че 3D обектът изглеждаше ефективен начин да направи концепцията по-осезаема.“

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

Основната технология, използвана за това, е WebGL, въпреки че е API на доста ниско ниво, казва Лабус. „Избрахме three.js като рамка от по-високо ниво, която абстрахира WebGL и улеснява зареждането на обекти, настройката на осветлението и материалите и др. В интерес на истината имахме късмета да открием, че three.js включва икосаедър по подразбиране като един от вградените му примитиви.

„Първоначалната версия просто използва вградения примитив. По-късно обаче решихме, че искаме заоблени ръбове на формата да съответстват по-добре на съществуващото 3D естетическо използване другаде stripe.com , така че изобразихме заоблен икосаедър в Cinema4D и го заредихме като обект в three.js. Етикетите на върховете, които представят различните атрибути на заряд, не се изобразяват в 3D среда, а като нормални HTML елементи над 3D платното. Това трябваше да осигури най-висококачественото изобразяване за текст и също така да улесни локализацията.

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

„Друг елемент, който не се изобразява в 3D среда, е сянката, хвърлена от обекта. Тъй като е достатъчно дифузен, успяхме просто да размажем a зад 3D платното, без да се забелязва, че формата на сянката не съвпада идеално с формата на икосаедъра. Това беше направено предимно поради съображения за производителност, тъй като големите, дифузни сенки обикновено са един от най-скъпите ефекти за изобразяване, особено в рамките на анимационен цикъл. '

04. Даян Мартел

И преди сме виждали уеб текст в стила на началните кредити на Междузвездни войни, но никога така. Уебсайтът на американския режисьор на музикални видеоклипове и хореограф Даян Мартел (известен най-вече с видеоклипа „Размити линии“) използва устройството с голям ефект, за да покаже заглавията на нейното произведение в началната си страница.

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

05. OS Maps

От забавно и несериозно използване на 3D до пълно, функционално. Вчера Ordnance Survey, националната агенция за картографиране в Обединеното кралство и един от най-големите производители на карти в света, даде на своите наградени OS Maps голяма актуализация, въвеждайки точно 3D картографиране на британската провинция.

Обичани от проходилки, велосипедисти и други, обикалящи хълмовете и долините на Обединеното кралство, OS Maps се предлага в мрежата и като приложение. „В него се съхраняват над 750 000 маршрута и 3D елементът означава, че можете да видите по-добре маршрутите и да добиете представа дали маршрутът е постижим“, разкрива пресслужителят Кийгън Уилсън.

3D картографирането, което е конструирано с невероятни детайли с помощта на невероятно точни лазери, е достъпно чрез мрежата само за абонати на OS Maps. Всеки, който иска да разследва и да разгледа, може да го направи чрез седемдневна безплатна пробна версия.

06. Земя 2050

За да отпразнува своята 20-годишнина, гигантът за сигурност Kaspersky стартира интерактивен проект, който приканва потребителите да обсъдят света на бъдещето, възможностите, които той носи, и заплахите, които може да предизвика. В центъра му е Земята 2050, страхотен сайт, построен от московското студио Възможен което кани дизайнерите и илюстраторите да качат своите виждания за бъдещето чрез интерактивен портал.

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

„Нашата концепция е вдъхновена от Google Street View и компютърни игри като НЛО и Цивилизация, както и от футуристичната перспектива на самата Лаборатория на Касперски“, обясняват от екипа на Possible. „Глобусът създаваше с помощта на собствени WebGL, HTML5, CSS3, JS, WebGL и PHP 7. Изграждането на интерфейса включваше оптимизация на честотната лента и стандартно кеширане на браузъра, модули за съдържание, кодиране, WebGL модули с планетата, сърфиране и редактиране на панорама.“

07. Титуан Матис

Titouan Mathis, уеб разработчик, базиран в Страсбург, Франция, има много прост уебсайт, който използва, за да се свърже със своя Twitter, Instagram и сайта на работодател Studio Meta. Но той го оживява със забавен изблик на интерактивен, анимиран 3D: три непрекъснато спираловидни шарки, които изглеждат супер стилни и с които просто няма как да не си поиграете.

„Вдъхновението идва главно от неща, които срещам през деня си“, обяснява Матис. „Понякога всички тези неща се смесват и една идея се появява в главата ми. Ще се опитам да го пресъздам и да си поиграя с фигурите, за да намеря хубави начини за взаимодействие с тях. '

Всичките три анимации са създадени с HTML, CSS и JavaScript, като Vue.js помага по отношение на структурата, а кодът е достъпен на GitHub ако искате да го проверите. „Най-голямото техническо предизвикателство беше производителността“, добавя Матис. „Познаването ми с HTML, CSS и JavaScript позволява бързо прототипиране на идеи, но анимирането на много DOM елементи може бързо да стане доста тежко за браузъра. Следващите ми анимации със сигурност ще бъдат създадени с Three.js или подобна библиотека. '

08. Вълшебниците Сезон 2

На друга интерактивна карта, този път за измисления свят на хип телевизионното фентъзи шоу „Магьосниците“. Британска агенция Единица 9 Екипът от програмисти използва Three.js, WebGL и GLSL, за да разработи тази блестящо интерактивна карта, където потребителите могат да се впуснат в куестове и да открият повече за втори сезон. От фантастични същества до древни богове, всеки седмичен куест отразява темата на всеки епизод. Дори и да не гледате шоуто, това завладяващо използване на уеб 3D все още си заслужава да бъде посетено.

09. Преследване на звука

Ще завършим с нещо, което е просто забавно. Избягвайте препятствията, хващайте предметите и създавайте свой собствен саундтрак чрез лудото си музикално бягане в този луд експеримент WebGL. Насочен както към обикновения потребител на настолни компютри / мобилни устройства, така и към ентусиаста на виртуалната реалност (съвместим е с Google Cardboard), това е чудесна витрина за 3D умните умения на творческата агенция в Париж Биборг . Всеки път, когато го играете, средите са различни и това е много пристрастяващо ... бъдете предупредени!