9 puikūs 3D panaudojimai kuriant internetą

3D žiniatinklyje tikrai atsirado 2011 m., Kai buvo paleista „WebGL“, „JavaScript“ API, skirta 3D grafikai perteikti suderinamoje naršyklėje nenaudojant papildinių. Vėlesniais metais interneto dizaineriai labai jaudinosi dėl 3D galimybių.

Pastaraisiais metais ši pradinė ažiotažas galėjo užgesti. Tačiau internetinė 3D plėtra tęsėsi sparčiai ir yra keletas gana įspūdingų diegimų; nuo „wow factor“ vaizdų, kurie daugiausia veikia kaip koncepcijos įrodymas, iki apgalvoto 3D naudojimo, kurio tikslas - sukurti puikią interneto patirtį.

Šiame įraše pateikiame keletą naujausių 3D naudojimų internete (kai kurie maži ir subtilūs, kiti prašmatnūs ir epiški), kad įkvėptumėte savo projektus. O, jei lauke pastebėjote puikų 3D naudojimą, komentaruose pasidalykite nuoroda.



01. Acko.net

Ilgas ir vingiuotas kūrėjo Steve

Ilgas ir vingiuotas kūrėjo Steve'o Wittenso tinklalapio antraštė

Jei ieškote pavyzdžio, ką naršyklės 3D gali atnešti į internetą, jums nereikia ieškoti daugiau nei „Acko.net“, asmeninėje interneto kūrėjo Steveno Wittenso svetainėje. Jame yra graži animuota antraštė, įkvėpta gatvės meno; tai paprasta idėja, bet nuostabiai įgyvendinta.

Wittensas sukūrė jį naudodamas CSS 3D ir WebGL derinį. 'Kiekvienos juostelės sukimas nėra generuojamas savavališkai, bet gaunamas matematiškai', - paaiškina jis. „Tai įkūnija diferencinį lygiagretaus transporto principą. Aukštyn kryptis keičiasi lygiagrečiai kiekvienai kreivei, o tai reiškia, kad juostelės niekada nesisuka savo vietoje. Jie pasisuka tik tada, kai natūraliai to nori. Taigi, dizaino rūšis turi savo valią “.

Galite perskaityti visą istoriją, kaip jis ją sudėjo šį tinklaraščio įrašą . Ir jei animacija neveikia jūsų naršyklėje, galite ją patikrinti šį vaizdo įrašą .

02. „Campo Alle Comets“

Įženkite į fantastinį pasaulį naudodamiesi šia apdovanojimų pelniusia vyno svetaine

Įženkite į fantastinį pasaulį naudodamiesi šia apdovanojimų pelniusia vyno svetaine

Nuo pat jos atidarymo vasario mėnesį ši svetainė jau pelnė daugybę apdovanojimų, ir nesunku suprasti, kodėl. Sukurtas reklamuoti itališką vyną „Campo Alle Comete“, jis vaizduoja 3D plūduriuojantį miestą, „kuriame pagaliau gali susitikti svajonės ir magija“. Vaizdingos dizaino savybės, susituokusios su sklandžiu įgyvendinimu, yra gana stulbinančios, ir tikrai malonu šnibždėti aplink šį fantastišką pasaulį naudojant pelę.

  • 7 naujos grafinio dizaino priemonės, palengvinančios jūsų gyvenimą

Pastatė italų studijos Tai ir Monogridas , šis puikus 3D naudojimas internete buvo sukurtas naudojant „WebGL“ ir „GSAP“ kartu su „three.js“ ir „AngularJS“.

03. Stripe.com

padaryti visas nuotraukas privačias feisbuke
Paprastas, bet efektyvus 3D diegimas mokėjimo platformos „Stripe“ svetainėje

Daug paprastesnis 3D diegimas, šis interaktyvus, besisukantis ikozaedras vis dėlto yra labai efektyvus pateikiant įvairius meniu variantus šauniai ir originaliai. Pateikta mokėjimo platformos „Stripe“ svetainėje, ją sukūrė Billas Labusas, remdamasis „Stripe“ produktų rinkodaros srityje dirbančios Krithikos Muthukumar idėja.

„Ji numatė būdą, kaip vizualiai pavaizduoti„ Stripe “krūvį iš radaro perspektyvos, kuris naudoja mašininį mokymąsi, kad įvertintų gaunamus mokesčius ir numatytų tikimybę, kad jie yra teisėti ar apgaulingi“, - aiškina Labus. „Mašininis mokymasis yra gana abstraktus dėl savo prigimties, todėl 3D objektas atrodė efektyvus būdas padaryti koncepciją apčiuopiamą“.

Mašininis mokymasis savo pobūdžiu yra gana abstraktus, todėl 3D objektas atrodė efektyvus būdas padaryti koncepciją apčiuopiamą

Billas Labusas

Pagrindinė tam naudojama technologija yra „WebGL“, nors tai yra gana žemo lygio API, sako Labus. „Mes pasirinkome„ three.js “kaip aukštesnio lygio sistemą, kuri abstrakčiai naudoja„ WebGL “ir palengvina objektų įkėlimą, apšvietimo ir medžiagų nustatymą ir dar daugiau. Tiesą sakant, mums pasisekė, kad trys.js pagal numatytuosius nustatymus apima ikosaedrą kaip vieną iš jo pradinių elementų.

samsung galaxy s20 vs iphone 11

„Pradinėje versijoje paprasčiausiai buvo naudojamas įmontuotas primityvas. Tačiau vėliau nusprendėme, kad norime, kad formos užapvalinti kraštai geriau atitiktų esamą 3D estetinį panaudojimą kitur juosta.com , todėl „Cinema4D“ perteikėme suapvalintą ikosaedrą ir įkėlėme jį kaip objektą į tris.js. Viršūnių etiketės, vaizduojančios įvairius krūvio atributus, nėra atvaizduojamos 3D aplinkoje, bet kaip įprasti HTML elementai virš 3D drobės. Tai turėjo užtikrinti aukščiausios kokybės teksto atvaizdavimą ir palengvinti lokalizavimą.

„Animuodami ikosaedrą, mes apskaičiuojame viršūnių pozicijas, taip pat ar jos šiuo metu matomos ar neužgožtos už objekto, ir tada naudojame šią informaciją etiketės elementų padėčiai ir rodymui / slėpimui.

„Kitas elementas, kuris nėra atvaizduojamas 3D aplinkoje, yra objekto metamas šešėlis. Kadangi jis yra pakankamai difuzinis, mes galėjome tiesiog neryškinti už 3D drobės, nepastebint, kad šešėlio forma visiškai neatitinka ikosaedro formos. Tai buvo daroma visų pirma dėl našumo sumetimų, nes dideli, difuziniai šešėliai paprastai yra vienas iš brangesnių efektų, ypač animacijos cikle. “

04. Diane Martel

Šiais pasukamais, slenkančiais pavadinimais smagu žaisti

Šiais pasukamais, slenkančiais pavadinimais smagu žaisti

Jau anksčiau matėme „Žvaigždžių karų“ pradžios kreditų stiliaus internetinį tekstą, bet niekada tokio. Amerikiečių muzikinių vaizdo įrašų režisierės ir choreografės Diane Martel (geriausiai žinomos dėl vaizdo „Neryškios linijos“) svetainė naudoja šį įrenginį, kad savo pagrindiniame puslapyje pademonstruotų savo darbų pavadinimus.

Naudokite pelę, kad juos sukinėtumėte ir pasuktumėte, kai jie slenka, užveskite pelės žymeklį virš pavadinimo, kad pamatytumėte daugiau kadrų, arba spustelėkite visą puslapį. Šią spalvingą ir įspūdingą svetainę sukūrė Benas Wegsheideris , kurio pačios svetainėje taip pat yra keletas puikių 3D triukų.

05. OS žemėlapiai

Ginklų tyrimo žemėlapiai eina 3D formatu

Ginklų tyrimo žemėlapiai eina 3D formatu

Nuo linksmo ir lengvabūdiško 3D naudojimo iki pilno, funkcionalaus. Vakar „Ordnance Survey“, JK nacionalinė žemėlapių agentūra ir viena didžiausių pasaulyje žemėlapių gamintojų, savo apdovanojimus pelniusiems „OS Maps“ pateikė svarbų atnaujinimą, pristatydama tikslią Didžiosios Britanijos kaimo 3D žemėlapį.

Mėgstami pėsčiųjų, dviratininkų ir kitų, važiuojančių po JK kalvas ir slėnius, „OS Maps“ galima rasti internete ir kaip programą. „Jame yra daugiau nei 750 000 maršrutų, o 3D elementas reiškia, kad galite geriau pamatyti maršrutus ir sužinoti, ar maršrutas yra įmanomas“, - atskleidžia spaudos pareigūnas Keeganas Wilsonas.

3D žemėlapiai, kurie buvo sukonstruoti įspūdingai detaliai, naudojant neįtikėtinai tikslius lazerius, per internetą prieinami tik OS žemėlapių abonentams. Tačiau kiekvienas, norintis ištirti ir apsižvalgyti, gali tai padaryti atlikdamas septynių dienų nemokamą bandomąją versiją.

06. Žemė 2050 m

Kaspersky pristato Žemės ateitį, naudodamas interaktyvų 3D pasaulį

Kaspersky pristato Žemės ateitį, naudodamas interaktyvų 3D pasaulį

Švęsdamas 20-metį, saugumo milžinas „Kaspersky“ pradėjo interaktyvų projektą, kviečiantį vartotojus aptarti ateities pasaulį, jo teikiamas galimybes ir galimas grėsmes. Jos centre yra 2050 m. Žemė, puiki vieta, kurią pastatė Maskvos studija Galima kviečia dizainerius ir iliustratorius įkelti savo ateities vizijas per interaktyvų portalą.

Pagrindiniame puslapyje yra besisukanti Žemės planeta, suskirstyta į geografines sritis, kiekvienoje iš jų pateikiama tam tikro 2050 metų gyvenimo prognozė. Bet kuris dizaineris, iliustratorius ar menininkas gali įkelti savo darbus, o visuomenės nariai gali pakomentuoti, ar jie tiki, kad tam tikros prognozės išsipildys.

„Mūsų koncepciją įkvėpė„ Google Street View “ir kompiuteriniai žaidimai, tokie kaip NSO ir„ Civilization “, taip pat futuristinės pačios„ Kaspersky Lab “perspektyvos“, - paaiškina „Possible“ komanda. „Žemės rutulys kūrė naudodamas vietinius„ WebGL “, HTML5, CSS3, JS,„ WebGL “ir PHP 7.„ Frontend “kūrimas apėmė pralaidumo optimizavimą ir įprastą naršyklės talpyklą, turinio modulius, kodavimą,„ WebGL “modulius su planeta, naršymą ir panoramos redagavimą.“

07. Tituanas Mathisas

Kūrėjas Titouanas Mathisas atgaivina savo asmeninę svetainę naudodamas linksmą animacijų seriją

Kūrėjas Titouanas Mathisas atgaivina savo asmeninę svetainę naudodamas linksmą animacijų seriją

Strasbūre (Prancūzija) įsikūręs interneto kūrėjas Titouanas Mathisas turi labai paprastą svetainę, kurią jis naudoja norėdamas susieti savo „Twitter“, „Instagram“ ir darbdavio „Studio Meta“ svetainę. Bet jis tai atgaivina linksmu interaktyvaus, animuoto 3D pliūpsniu: trys nuolat spiralės keliu piešiniai, kurie atrodo itin stilingai ir kuriais tiesiog negalite nesijaudinti.

„Įkvėpimo daugiausia davė dalykai, su kuriais susidūriau per dieną“, - paaiškina Mathis. „Kartais visi šie dalykai susimaišo ir man į galvą šauna idėja. Pabandysiu tai atkurti ir pažaisti su figūromis, kad galėčiau rasti gražių būdų su jomis bendrauti. “

Trys animacijos buvo sukurtos naudojant HTML, CSS ir „JavaScript“, o „Vue.js“ padėjo struktūros požiūriu, o kodas yra „GitHub“ jei norite tai patikrinti. „Didžiausias techninis iššūkis buvo našumas“, - priduria Mathis. „Mano žinios apie HTML, CSS ir„ JavaScript “leidžia greitai sukurti idėjų prototipus, tačiau daugelio DOM elementų animavimas gali greitai tapti gana sunkus naršyklėje. Kitos mano animacijos tikrai bus sukurtos naudojant „Three.js“ ar panašią biblioteką. “

08. Magai 2 sezonas

kaip užpildyti rašiklio įrankį
Naršykite „Magų“ fantazijos pasaulyje šioje 9-ojo bloko sukurtoje svetainėje

Į kitą interaktyvų žemėlapį, šį kartą išgalvotam hip TV televizijos fantastinės laidos „Magai“ pasauliui. JK agentūra 9 blokas Programuotojų komanda naudojo „Three.js“, „WebGL“ ir „GLSL“, kad sukurtų šį puikiai interaktyvų žemėlapį, kuriame vartotojai gali pradėti ieškoti ir sužinoti daugiau apie antrąjį sezoną. Pradedant fantastiškomis būtybėmis ir senovės dievais, kiekvienas savaitinis ieškojimas atspindi kiekvieno epizodo temą. Net jei nežiūrite laidos, vis tiek verta aplankyti šį įtraukiantį interneto 3D naudojimą.

09. Garso siekimas

Linksmas ir pašėlęs žaidimas iš Prancūzijos studijos „Biborg“

Mes baigsime tuo, kas yra tiesiog smagu. Šiame beprotiškame „WebGL“ eksperimente venkite kliūčių, gaukite daiktus ir sukurkite savo garso takelį per savo beprotišką muzikinį bėgimą. Numatytam darbalaukio / mobiliojo telefono vartotojui ir VR entuziastui (jis suderinamas su „Google Cardboard“), tai puiki Paryžiaus kūrybos agentūros 3D išmaniųjų vitrina. Biborgas . Kiekvieną kartą, kai jį groji, aplinka skiriasi, ir tai labai sukelia priklausomybę ... būk įspėtas!