9 lysande användningar av 3D i webbdesign

3D på webben anlände verkligen 2011 med lanseringen av WebGL, ett JavaScript-API för rendering av 3D-grafik i en kompatibel webbläsare utan användning av plugins. Och de följande åren såg mycket spänning för 3D-möjligheterna bland webbdesigners.

Den första hype kan ha dött under de senaste åren. Men utvecklingen av online-3D har fortsatt snabbt, och det finns några ganska imponerande implementeringar där ute; från ”wow factor” -visualer som huvudsakligen fungerar som ett bevis på konceptet till genomtänkta användningsområden för 3D riktat mot att skapa en fantastisk webbupplevelse.

I det här inlägget listar vi några senaste användningar av 3D på webben (några små och subtila, vissa prickiga och episka) för att inspirera dina egna projekt. Åh, och om det är bra att använda 3D som du har upptäckt i naturen, vänligen dela en länk i kommentarerna.



01. Acko.net

En lång och slingrande rubrik för utvecklaren Steve Wittens webbplats

En lång och slingrande rubrik för utvecklaren Steve Wittens webbplats

Om du letar efter ett exempel på vad webbläsarbaserad 3D kan ge till internet behöver du inte leta längre än Acko.net, den personliga webbplatsen för webbutvecklaren Steven Wittens. Den har en vacker animerad rubrik inspirerad av gatukonst; det är en enkel idé men underbart utförd.

Wittens skapade den med en kombination av CSS 3D och WebGL. 'Vridningen av varje band genereras inte godtyckligt, utan matematiskt härledd', förklarar han. ”Den förkroppsligar differentieringsprincipen för parallell transport. Uppriktningen ändras parallellt med varje kurva, vilket innebär att banden aldrig roterar på plats. De vänder bara när de naturligt vill. Därför har designtypen en egen vilja. ”

Du kan läsa hela historien om hur han satte ihop den i detta blogginlägg . Och om animeringen inte fungerar i din webbläsare kan du kolla in den den här videon .

02. Campo Alle Comets

Gå in i en fantastisk värld via denna prisbelönta vinwebbplats

Gå in i en fantastisk värld via denna prisbelönta vinwebbplats

Sedan den lanserades i februari har denna webbplats redan vunnit massor av utmärkelser, och det är inte svårt att se varför. Skapat för att marknadsföra det italienska vinet Campo Alle Comete, det visar en 3D-flytande stad, 'där drömmar och magi äntligen kan mötas'. De fantasifulla egenskaperna hos designen, som är gift med mjukheten i implementeringen, är ganska häpnadsväckande, och det är verkligen en glädje att susa runt denna fantastiska värld med musen.

  • 7 nya verktyg för grafisk design för att göra ditt liv enklare

Byggd av italienska studior Detta och Monogrid , denna lysande användning av 3D på webben skapades med WebGL och GSAP tillsammans med three.js och AngularJS.

03. Stripe.com

En enkel men effektiv implementering av 3D på betalningsplattform Stripes webbplats

hur man kan bli av med perspektiv rutnät Adobe Illustrator
En enkel men effektiv implementering av 3D på betalningsplattform Stripes webbplats

En mycket enklare implementering av 3D, denna interaktiva, roterande icosahedron är ändå mycket effektiv när det gäller att presentera en rad menyalternativ på ett coolt och originellt sätt. Den presenterades på betalningsplattformen Stripes webbplats och designades av Bill Labus, baserat på en idé om Krithika Muthukumar, som arbetar med produktmarknadsföring på Stripe.

'Hon föreställde sig ett sätt att visuellt representera en Strip-laddning ur Radars perspektiv, som använder maskininlärning för att få inkommande laddningar och förutsäga sannolikheten att de är legitima eller bedrägliga', förklarar Labus. 'Maskininlärning är av sin natur ganska abstrakt, så ett 3D-objekt verkade vara ett effektivt sätt att göra konceptet mer konkret.'

Maskininlärning är av sin natur ganska abstrakt, så ett 3D-objekt verkade vara ett effektivt sätt att göra konceptet mer konkret

Bill Labus

Den primära tekniken som används för detta är WebGL, även om det är ett relativt lågt API, säger Labus. ”Vi valde three.js som ett ramverk på högre nivå som abstrakt över WebGL och gör det enklare att ladda objekt, ställa in belysning och material och mer. I själva verket hade vi turen att hitta att three.js innehåller en icosahedron som standard som en av dess inbyggda primitiver.

”Den ursprungliga versionen använde helt enkelt den inbyggda primitiven. Vi bestämde oss dock senare för att vi ville ha rundade kanter på formen för att bättre matcha den befintliga 3D-estetiska användningen någon annanstans stripe.com , så vi gjorde en rundad icosahedron i Cinema4D och laddade den som ett objekt i three.js. Kodetiketterna som representerar de olika attributen för en laddning återges inte i 3D-miljön utan som vanliga HTML-element ovanför 3D-duken. Detta var för att säkerställa högsta kvalitet rendering för text och också för att göra lokalisering enklare.

”När vi animerar icosahedronen beräknar vi hörnens positioner, liksom huruvida de för närvarande är synliga eller dolda bakom objektet, och sedan använder vi den informationen för att placera och visa / dölja etikettelementen.

”Ett annat element som inte återges i 3D-miljön är skuggan som kastas av objektet. Eftersom det är tillräckligt diffust kunde vi helt enkelt suddiga a bakom 3D-duken, utan att det märks att skuggans form inte perfekt matchar formen på icosahedronen. Detta gjordes främst av prestationsskäl, eftersom stora, diffusa skuggor vanligtvis är en av de dyrare effekterna att göra, särskilt inom en animationsslinga. ”

04. Diane martel

Dessa roterbara, rullande titlar är roliga att leka med

Dessa roterbara, rullande titlar är roliga att leka med

Vi har sett webbtext i stil med Star Wars-öppningskrediterna tidigare, men aldrig så här. Webbplatsen för den amerikanska musikregissören och koreografen Diane Martel (mest känd för 'Blurred Lines' -videoen) använder enheten med stor effekt för att visa upp titlarna på hennes arbete över sin hemsida.

Använd musen för att vrida och rotera dem när de rullar, håll muspekaren över en titel för att avslöja fler stillbilder eller klicka dig vidare till hela sidan. Denna färgstarka och imponerande webbplats designades av Ben Wegsheider , vars egen webbplats också innehåller några ganska snygga 3D-tricks.

05. OS-kartor

Ordnance Survey-kartor går i 3D

Ordnance Survey-kartor går i 3D

Från en rolig och oseriös användning av 3D till en fullständig, funktionell. Igår gav Ordnance Survey, Storbritanniens nationella kartläggningsbyrå och en av världens största producenter av kartor, sitt prisbelönta OS Maps en stor uppdatering med en korrekt 3D-kartläggning av den brittiska landsbygden.

hur man gör ett rutnät på illustratören

Älskad av vandrare, cyklister och andra som korsar kullarna och dalarna i Storbritannien, OS Maps är tillgänglig via webben och som en app. 'Den har över 750 000 rutter lagrade i den och 3D-elementet kommer att innebära att du bättre kan se rutterna och få en uppfattning om rutten är möjlig', avslöjar pressansvarig Keegan Wilson.

3D-kartläggningen, som har konstruerats i spektakulär detalj med hjälp av otroligt exakta lasrar, är endast tillgänglig på OS Maps-abonnenter. Men den som vill undersöka och titta igenom kan göra det genom en sju dagars gratis testperiod.

06. Jorden 2050

Kaspersky presenterar jordens framtid med hjälp av en interaktiv 3D-jordglob

Kaspersky presenterar jordens framtid med hjälp av en interaktiv 3D-jordglob

För att fira sitt 20-årsjubileum har säkerhetsjätten Kaspersky lanserat ett interaktivt projekt som uppmanar användarna att diskutera framtidens värld, de möjligheter den ger och de hot som den kan orsaka. I centrum ligger Earth 2050, en cool plats byggd av Moskva-studion Möjlig som inbjuder designers och illustratörer att ladda upp sina framtidsvisioner via en interaktiv portal.

Hemsidan har en roterande planet Jorden uppdelad i geografiska områden, var och en innehåller en prognos för en viss aspekt av livet 2050. Alla designer, illustratörer eller artister kan ladda upp sitt arbete, och allmänheten kan kommentera om de tror att vissa förutsägelser kommer att gå i uppfyllelse.

'Vårt koncept inspirerades av Google Street View och PC-spel som UFO och Civilization, liksom de futuristiska synen på Kaspersky Lab själva', förklarar teamet på Possible. 'Globen skapade med hjälp av infödda WebGL, HTML5, CSS3, JS, WebGL och PHP 7. Att bygga fronten innebar optimering av bandbredd och standardbläddring för webbläsare, innehållsmoduler, kodning, WebGL-moduler med planeten, surfning och panoramabearbetning.'

07. Titouan Mathis

Utvecklaren Titouan Mathis väcker sin personliga webbplats till liv med en rolig serie animationer

skapa en film med specialeffekter
Utvecklaren Titouan Mathis väcker sin personliga webbplats till liv med en rolig serie animationer

Titouan Mathis, en webbutvecklare baserad i Strasbourg, Frankrike, har en mycket enkel webbplats som han använder för att länka till sin Twitter, Instagram och arbetsgivaren Studio Metas webbplats. Men han levererar det med ett underhållande stänk av interaktiv, animerad 3D: tre ständigt spiralformade mönster som ser superstarka ut och som du bara inte kan låta bli att leka med.

'Inspirationen kom främst från saker jag stöter på under min dag', förklarar Mathis. ”Ibland blandar sig alla dessa saker och en idé dyker upp i mitt huvud. Jag ska försöka återskapa det och leka med formerna för att hitta trevliga sätt att interagera med dem. ”

De tre animationerna skapades alla med HTML, CSS och JavaScript, där Vue.js hjälpte till när det gäller struktur, och koden finns på GitHub om du vill kolla in det. 'Den största tekniska utmaningen var prestanda', tillägger Mathis. ”Min förtrogenhet med HTML, CSS och JavaScript möjliggör snabb prototyping av idéer, men att animera många DOM-element kan snabbt bli ganska tunga i webbläsaren. Mina nästa animationer kommer säkert att skapas med Three.js eller ett liknande bibliotek. ”

08. The Magicians säsong 2

Navigera The Magicians fantasivärld på den här webbplatsen byggd av Unit 9

Navigera The Magicians fantasivärld på den här webbplatsen byggd av Unit 9

På en annan interaktiv karta, den här gången för den fiktiva världen av hip TV-fantasyserien The Magicians. Brittiska byrån Enhet 9 Teamet av programmerare använde Three.js, WebGL och GLSL för att utveckla denna lysande interaktiva karta, där användare kan börja på uppdrag och upptäcka mer om säsong två. Från fantastiska varelser till forntida gudar speglar varje uppdrag varje vecka temat för varje avsnitt. Även om du inte tittar på showen är denna uppslukande användning av webb-3D fortfarande mycket värt ett besök.

09. Strävan efter ljud

Ett roligt och galet spel från den franska studion Biborg

Ett roligt och galet spel från den franska studion Biborg

Vi avslutar med något som bara är roligt. Undvik hinder, fånga föremålen och skapa ditt eget soundtrack genom din galna musikaliska körning, i detta galna WebGL-experiment. Riktat till både den avslappnade stationära / mobila användaren och VR-entusiasten (det är kompatibelt med Google Cardboard), detta är en fantastisk utställning för 3D-kreativitetsbyrån i Paris Biborg . Varje gång du spelar det är miljöerna olika, och det är väldigt beroendeframkallande ... varnas!