9 loistavaa 3D-käyttöä web-suunnittelussa

3D verkkoon saapui todella vuonna 2011, kun käynnistettiin WebGL, JavaScript-sovellusliittymä, jolla 3D-grafiikat voidaan tehdä yhteensopivassa selaimessa ilman laajennuksia. Seuraavina vuosina web-suunnittelijoiden keskuudessa nähtiin paljon jännitystä 3D-mahdollisuuksista.

Tämä alkuperäinen hype voi olla hiljentynyt viime vuosina. Mutta online-3D: n kehitys on jatkunut vauhdilla, ja siellä on joitain melko vaikuttavia toteutuksia; 'wow factor' -kuvista, jotka toimivat pääasiassa konseptin todisteena, 3D: n harkittuihin käyttötarkoituksiin, joiden tarkoituksena on luoda upea verkkokokemus.

Tässä viestissä luetellaan joitain 3D: n viimeaikaisia ​​käyttötapoja verkossa (jotkut pienet ja hienovaraiset, jotkut räikeät ja eeppiset) inspiroimaan omia projektejasi. Voi, ja jos olet havainnut paljon 3D: tä, jonka olet havainnut luonnossa, jaa linkki kommentteihin.



01. Acko.net

Pitkä ja mutkikas otsikko kehittäjä Steve Wittensin verkkosivustolle

Pitkä ja mutkikas otsikko kehittäjä Steve Wittensin verkkosivustolle

Jos etsit esimerkkiä siitä, mitä selainpohjainen 3D voi tuoda verkkoon, sinun ei tarvitse etsiä muuta kuin Acko.net, verkkosivustokehittäjä Steven Wittensin henkilökohtainen sivusto. Siinä on kaunis animoitu otsikko, joka on innoittanut katutaide; se on yksinkertainen idea, mutta toteutetaan upeasti.

Wittens loi sen CSS 3D: n ja WebGL: n yhdistelmällä. 'Kunkin nauhan kiertämistä ei synny mielivaltaisesti, vaan se johdetaan matemaattisesti', hän selittää. ”Se ilmentää rinnakkaiskuljetuksen differentiaaliperiaatetta. Ylösuunta muuttuu yhdensuuntaisesti kunkin käyrän kanssa, mikä tarkoittaa, että nauhat eivät koskaan pyöri paikallaan. He kääntyvät vain silloin, kun haluavat luonnollisesti. Siksi suunnittelulla on oma tahto. '

Voit lukea koko tarinan siitä, miten hän kokosi sen tämä blogiviesti . Ja jos animaatio ei toimi selaimessasi, voit tarkistaa sen Tämä video .

02. Campo Alle Comets

Astu fantastiseen maailmaan tämän palkitun viinisivuston kautta

Astu fantastiseen maailmaan tämän palkitun viinisivuston kautta

Helmikuussa avattuaan tämä verkkosivusto on jo voittanut useita palkintoja, eikä ole vaikea ymmärtää miksi. Se on luotu mainostamaan italialaista Campo Alle Comete -viiniä, ja se kuvaa kelluvaa kolmiulotteista kaupunkia, 'jossa unelmat ja taika voivat vihdoin tavata'. Suunnittelun mielikuvitukselliset ominaisuudet, naimisissa toteutuksen sujuvuuden kanssa, ovat melko hämmästyttäviä, ja on todella ilo viheltää ympäri tätä fantastista maailmaa hiirellä.

  • 7 uutta graafisen suunnittelun työkalua helpottamaan elämääsi

Rakentaja italialaiset studiot Tämä ja Monogrid , tämä 3D: n loistava käyttö verkossa luotiin käyttämällä WebGL: ää ja GSAP: ta yhdessä kolmen.js: n ja AngularJS: n kanssa.

03. Stripe.com

Yksinkertainen, mutta tehokas 3D-toteutus Stripen maksualustan sivustolla

kuinka leikata logo Photoshopista
Yksinkertainen, mutta tehokas 3D-toteutus Stripen maksualustan sivustolla

Paljon yksinkertaisempi 3D-toteutus, tämä vuorovaikutteinen, pyörivä ikosaedri on kuitenkin erittäin tehokas esittäessään useita valikkovaihtoehtoja viileällä ja omaperäisellä tavalla. Stripen maksualustan sivuston on suunnitellut Bill Labus Stripen tuotemarkkinoinnissa työskentelevän Krithika Muthukumarin idean perusteella.

'Hän kuvitteli tapaa kuvata visuaalisesti Stripe-latausta tutkan näkökulmasta, joka käyttää koneoppimista tulevien maksujen pisteytykseen ja ennustaa niiden laillisuuden tai vilpillisyyden todennäköisyyttä', Labus selittää. 'Koneoppiminen on luonteeltaan melko abstrakti, joten 3D-esine näytti tehokkaalta keinolta tehdä käsitteestä konkreettisempi.'

Koneoppiminen on luonteeltaan melko abstrakti, joten 3D-esine näytti tehokkaalta keinolta tehdä käsitteestä konkreettisempi

Bill Labus

Ensisijainen tähän käytetty tekniikka on WebGL, vaikka se onkin melko matalan tason API, Labus sanoo. 'Valitsimme three.js: n ylemmän tason kehykseksi, joka tiivistää WebGL: n ja helpottaa esineiden, valaistuksen ja materiaalien asettamista ja paljon muuta. Itse asiassa meillä oli onni huomata, että three.js sisältää oletusarvoisesti icosahedronin yhdeksi sen sisäänrakennetuista primitiiveistä.

”Alkuperäisessä versiossa käytettiin yksinkertaisesti sisäänrakennettua primitiiviä. Päätimme kuitenkin myöhemmin, että halusimme muodon pyöristetyt reunat vastaamaan paremmin nykyistä 3D-esteettistä käyttöä muualla stripe.com , joten renderöimme pyöristetyn ikosaedrin Cinema4D: ssä ja ladasimme sen objektina three.js: ään. Pistetunnisteita, jotka edustavat varauksen eri ominaisuuksia, ei hahmonneta 3D-ympäristössä, vaan normaalina HTML-elementtinä 3D-kankaan yläpuolella. Tämän tarkoituksena oli varmistaa tekstin korkealaatuinen renderointi ja myös helpottaa lokalisointia.

'Ikoahedronia animoimalla laskemme pisteiden sijainnit sekä sen, näkyvätkö ne tällä hetkellä objektin takana vai eivät, ja käytämme sitten näitä tietoja sijoittamaan ja näyttämään / piilottamaan tarraelementit.

”Toinen elementti, jota ei ole renderoitu 3D-ympäristössä, on kohteen heittämä varjo. Koska se on riittävän hajanainen, pystyimme yksinkertaisesti hämärtämään 3D-kankaan takana, huomaamatta, että varjon muoto ei vastaa täysin ikosaedrin muotoa. Tämä tehtiin ensisijaisesti suorituskykysyistä, koska suuret, hajanaiset varjot ovat tyypillisesti yksi kalliimmista vaikutuksista, erityisesti animaatiosilmukassa. '

04. Diane Martel

Nämä käännettävät, vierittävät otsikot ovat hauskoja leikkiä

Nämä käännettävät, vierittävät otsikot ovat hauskoja leikkiä

Olemme aiemmin nähneet Tähtien sota -elokuvan tyyliin avautuvia verkkotekstejä, mutta ei koskaan tällaista. Amerikkalaisen musiikkivideojohtajan ja koreografin Diane Martelin (tunnetaan parhaiten ”Hämärtyneet linjat” -videosta) verkkosivusto käyttää laitetta erinomaisesti esittelemään työnsä nimiä kotisivullaan.

Käytä hiirtä kiertääksesi ja kiertäessäsi niitä vierittäessä, viemällä hiiren otsikon päälle saadaksesi lisää valokuvia tai napsauttamalla koko sivua. Tämän värikkään ja vaikuttavan sivuston on suunnitellut Ben Wegsheider , jonka omalla verkkosivustolla on myös melko hienoja 3D-temppuja.

huion uusi 1060 plus (8192) -katsaus

05. Käyttöjärjestelmän kartat

Ordnance Survey -kartat ovat 3D-tilassa

Ordnance Survey -kartat ovat 3D-tilassa

3D: n hauskasta ja kevytmielisestä käytöstä täydelliseksi, toimivaksi. Eilen Ordnance Survey, Ison-Britannian kansallinen karttatoimisto ja yksi maailman suurimmista karttojen tuottajista, antoi palkitulle OS Mapsille merkittävän päivityksen, jossa otettiin käyttöön tarkka 3D-kartoitus Ison-Britannian maaseudulta.

Kävelijöiden, pyöräilijöiden ja muiden Ison-Britannian kukkuloita ja laaksoja läpi kulkevien rakastama OS Maps on saatavana verkon kautta ja sovelluksena. 'Siihen on tallennettu yli 750 000 reittiä, ja 3D-elementti tarkoittaa, että voit paremmin nähdä reitit ja saada käsityksen siitä, onko reitti saavutettavissa', paljastaa lehdistövirkailija Keegan Wilson.

3D-kartoitus, joka on rakennettu upeilla yksityiskohdilla uskomattoman tarkoilla lasereilla, on saatavana verkon kautta vain OS Mapsin tilaajille. Jokainen, joka haluaa tutkia ja tutustua asiaan, voi tehdä sen seitsemän päivän ilmaisen kokeilun avulla.

06. Maa 2050

Kaspersky esittelee maapallon tulevaisuutta interaktiivisen 3D-maapallon avulla

Kaspersky esittelee maapallon tulevaisuutta interaktiivisen 3D-maapallon avulla

20-vuotispäivänsä kunniaksi turvallisuusjätti Kaspersky on käynnistänyt interaktiivisen projektin, joka kutsuu käyttäjät keskustelemaan tulevaisuuden maailmasta, sen tuomista mahdollisuuksista ja mahdollisesti aiheuttamista uhista. Sen keskellä on Earth 2050, viileä sivusto, jonka on rakentanut Moskovan studio Mahdollinen joka kutsuu suunnittelijoita ja kuvittajaa lataamaan tulevaisuuden visionsa interaktiivisen portaalin kautta.

Kotisivulla on pyörivä maapallo, joka on jaettu maantieteellisiin alueisiin, ja jokainen sisältää ennusteen tietystä vuoden 2050 elämästä. Kuka tahansa suunnittelija, kuvittaja tai taiteilija voi ladata teoksensa, ja yleisön jäsenet voivat kommentoida uskovatko tiettyjen ennusteiden toteutuvan.

'Konseptimme inspiroivat Google Street View ja PC-pelit, kuten UFO ja Civilization, sekä Kaspersky Labin futuristiset näkymät', selittää Possible -tiimi. 'Maapallo oli luomassa natiivia WebGL-, HTML5-, CSS3-, JS-, WebGL- ja PHP 7 -käyttöjärjestelmää. Käyttöliittymän rakentamiseen liittyi kaistanleveyden optimointi ja tavallinen selaimen välimuisti, sisältömoduulit, koodaus, WebGL-moduulit planeetan kanssa, selaus ja panoraamamuokkaus.'

kuinka olla hyvä taiteellinen johtaja

07. Titouan Mathis

Kehittäjä Titouan Mathis herättää henkilökohtaisen sivustonsa eloon hauskalla animaatiosarjalla

Kehittäjä Titouan Mathis herättää henkilökohtaisen sivustonsa eloon hauskalla animaatiosarjalla

Ranskassa Strasbourgissa sijaitsevalla web-kehittäjällä Titouan Mathisilla on hyvin yksinkertainen verkkosivusto, jolla hän linkittää Twitterin, Instagramin ja työnantajan Studio Metan sivustoon. Mutta hän elää sen hauskalla interaktiivisen, animoidun 3D: n roiskeella: kolme jatkuvasti kierteellistä kuviota, jotka näyttävät erittäin tyylikkäiltä ja joita et voi vain olla tekemättä.

'Inspiraatio tuli lähinnä asioista, joita kohtaan päivälläni', Mathis selittää. ”Joskus kaikki nämä asiat sekoittuvat toisiinsa ja ajatus ponnahtaa päähäni. Yritän luoda sen uudelleen ja leikkiä muotojen kanssa löytääksesi hyviä tapoja olla vuorovaikutuksessa niiden kanssa. '

Kaikki kolme animaatiota luotiin HTML: llä, CSS: llä ja JavaScriptillä, ja Vue.js auttoi rakenteeltaan, ja koodi on saatavilla GitHub jos haluat tarkistaa sen. 'Suurin tekninen haaste oli suorituskyky', Mathis lisää. 'HTML-, CSS- ja JavaScript-tuntemukseni mahdollistaa nopean prototyyppien muodostamisen, mutta monien DOM-elementtien animointi voi nopeasti tulla melko raskaaksi selaimessa. Seuraavat animaatiot luodaan varmasti Three.js: llä tai vastaavalla kirjastolla. '

08. Taikurit Kausi 2

Selaa Taikureiden fantasiamaailmaa tällä yksikön 9 rakentamalla sivustolla

Selaa Taikureiden fantasiamaailmaa tällä yksikön 9 rakentamalla sivustolla

Toiselle interaktiiviselle kartalle, tällä kertaa hip-TV-fantasiaesityksen The Magicians kuvitteelliselle maailmalle. Yhdistyneen kuningaskunnan toimisto Yksikkö 9 Ohjelmoijien tiimi kehitti Three.js: n, WebGL: n ja GLSL: n tämän loistavan interaktiivisen kartan kehittämiseen, jossa käyttäjät voivat aloittaa tehtävänsä ja tutustua toiseen kauteen. Fantastisista olennoista muinaisiin jumaliin kukin viikoittainen tehtävä heijastaa jokaisen jakson teemaa. Vaikka et katsoisit ohjelmaa, tämä 3D-3D: n mukaansatempaava käyttö on silti erittäin vierailun arvoinen.

09. Äänen tavoittelu

Hauska ja hullu peli ranskalaisesta studiosta Biborg

Hauska ja hullu peli ranskalaisesta studiosta Biborg

Lopetamme jotain, joka on vain hauskaa. Vältä esteitä, nappaa kohteet ja luo oma ääniraita hullun musiikillisen juoksusi kautta tässä hullussa WebGL-kokeessa. Suunniteltu sekä rentolle työpöydälle / mobiilikäyttäjälle että VR-harrastajalle (se on yhteensopiva Google Cardboardin kanssa), tämä on loistava esittely Pariisin 3D-älykkäille toimistoille Biborg . Joka kerta kun pelaat sitä, ympäristöt ovat erilaiset, ja se on hyvin koukuttava ... varoitetaan!