Sisu
- Alustamine
- Plaadimängija aluse loomine
- Jalgade loomine
- Käsi ja pea
- Värvid ja tekstuurid
- Renderdamine ja eksportimine
- Logo viimistlemine
- Animeerige logo
3D-animatsiooni loomiseks veebis on mitu võimalust, enamik neist eeldab JavaScripti ja WebGL-i head tundmist või pistikprogrammi (näiteks Flash) kasutamist. Tänu CSS-i 3D-teisendustele on võimalik luua 3D-d ainult HTML-i ja CSS-i abil, kuid seda pole lihtne teha. Tridiv, minu tasuta veebirakendus, lihtsustab protsessi, pakkudes lihtsat ja intuitiivset WYSIWYG-liidest, mis võimaldab kasutajatel luua 3D-objekte ühtegi koodirida kirjutamata.
Selles õpetuses loome ja animeerime väljamõeldud plaadifirma Tridiv Records logo, kasutades ainult HTML-i ja CSS-i. Logo peamine visuaal luuakse 3D-vormingus, kasutades Tridivi. Seejärel lisame tüpograafilised elemendid tavalise HTML-i ja CSS-i abil.
Lõplikku animatsiooni ja selle genereerivat koodi näete siin.
Alustamine
Alustame Tridivi abil 3D-vormingus plaadimängija loomisega. Minge aadressile tridiv.com ja käivitage rakendus. Peate kasutama kas Chrome'i, Safari või Opera 15 (või uuemat).
Enne alustamist on oluline mõista Tridivi liidest. Redaktori põhiosa koosneb neljast vaatest: vasakus ülanurgas on 3D-vaade, mis pakub stseenile täieliku vaate. Kolm ülejäänud vaadet näitavad seda ülevalt, küljelt ja eest. Nende kolme vaate abil saate luua, muuta ja teisaldada 3D-kujundeid.
Horisontaalne tööriistariba on jagatud kaheks osaks: vasakpoolses osas kuvatakse teie dokumendiga seotud teave; paremas osas on tööriistad kujundite loomiseks ja redigeerimiseks. The Liiguta valik ja Muuda valikunupud lülituvad erinevate redigeerimisrežiimide vahel.
Atribuutide paanil (külgriba) kuvatakse dokumendisätted, nagu suum ja ruudustikule klõpsatus, ning valitud kuju omadused (suurus, asukoht, pööramine, värv jne). Mõõtude ja asendi jaoks kasutatav ühik on ems; pöördenurgad on kraadides.
Segaduste vältimiseks hilisemas õpetuses kasutame järgmist lühikirjeldust:
w = laius h = kõrgus d = sügavus diam = läbimõõt x deg = pöörlemine x-teljel y deg = pöörlemine y-teljel z deg = pöörlemine z-teljel
Plaadimängija aluse loomine
Alustage suumiväärtuse määramisega väärtusele 200. Kujundite joonistamise hõlbustamiseks aktiveerige ikoonil ruudustikule klõpsamise seade Dokumendi seaded külgriba osa. Valige snap väärtuseks 0.125.
Plaadimängija alus koosneb lihtsast risttahukast, nii et klõpsake nuppu Lisage risttahukas nuppu ülemisel tööriistaribal. Peaksite nägema, et ristnurk ilmub redaktoris kõigis neljas vaates.
Nimetage kuju ümber alus kasutades atribuutide paani nimevälja (all Kuju omadused). Kuju nimi peab olema kehtiv CSS-klassi nimi, kuna seda kasutatakse redaktori loodud koodis. Kasutame neid klasside nimesid logo animeerimisel hiljem, seega veenduge, et nimetaksite kõik uued kujundid, mille loote õigesti.
Kui risttahukas on nime saanud, veenduge, et see oleks valitud ülemises vaates (see peaks olema sinisega esile tõstetud ja selle ümber on ümmargune tööriistarõngas), seejärel klõpsake nuppu Muuda redigeerimise käepidemete kuvamiseks nupp rõnga ülaosas. Lohistage risttahuka külgedel olevaid juhtkäepidemeid, kuni laius ja sügavus ulatuvad w = 10 ja d = 8 aastal Kuju omadused.
Klõpsake külgvaates asuvat kuju. See näitab selle vaate redigeerimiskäepidemeid, võimaldades meil selle kõrgust muuta. Reguleerige kõrgust, kuni see jõuab h = 2. Väärtused saate sisestada ka otse omaduste paanile. Ristküliku nurkade ümardamiseks muutke omaduste paani nurkade väärtused väärtuseks 1.75, siis vajutage [Sisenema] muudatuste rakendamiseks. Teil on midagi sellist.
Jalgade loomine
Pöördlaua jalgade jaoks hakkame kasutama silindreid. Lisage silinder ja muutke selle läbimõõt väärtuseks diam = 1,75 ja selle kõrgus kuni h = 0,5. Klõpsake nuppu Liiguta valimisnupp ülemisel tööriistaribal kuju lohistatava ala kuvamiseks. Liigutage silinder aluse alla, asetades selle ühte nurka. (Teil võib tekkida vajadus seda ülalt, küljelt ja eestvaates liigutada.)
Duplitseerige silindrit (vajutage klahvi Duplikaat nupp tööriistade ümmarguses rõngas või vajutage nuppu D võti) ja uue silindri teisaldamiseks aluse teise nurka. Korrake toimingut, kuni kõik neli jalga on õigesti paigutatud. Ärge unustage silindreid nimetama (näiteks jalad-vasak-ülemine, jalad-parem-ülemine, jalad-vasak-põhi, jalad-vasak-ülemine). Kui olete selle teinud, peaks tulemus välja nägema selline.
Vaatame nüüd vaagna, ketta, õlgtelje ja nupu loomist. Järgmiste kujundite loomise protsess on sarnane jalgadele. Erinevate silindrite mõõtmed on järgmised:
vaagen: diam = 7; h = 0,5 ketas: diam = 6,75; h = 0,25 nupp: diam = 1,5; h = 0,25 käe-telje alus: diam = 2,25; h = 0,25 käe telg: diam = 1,375; h = 1
Silindrite külgede täpsustamiseks saate atribuutide paanil külgede välja abil suurendada kummagi näo arvu. Ärge lisage liiga palju külgi, kuna see võib negatiivselt mõjutada redaktori ja lõpliku animatsiooni üldist jõudlust. Sel juhul soovitan teil mitte kasutada vaagna ja plaadi jaoks rohkem kui 32 külge. Teil peaks olema midagi sellist.
Käsi ja pea
Pöördlaua käe ja pea jaoks kasutame risttahukaid. Käe jaoks looge risttahukas (w = 0,25; h = 0,25; d = 4), seejärel rakendage pööret -33° kohta y-telg. Pea jaoks looge risttahukas (w = 0,5; h = 0,5; d = 1), seejärel rakendage pööret -33° kohta y-telg. Joondage mõlemad kujud käsitelje silindriga. Tulemus peaks välja nägema selline.
Värvid ja tekstuurid
Plaadimängijaga oleme peaaegu valmis. Viimane samm on värvide määramine ja vinüülile tekstuuri kandmine (plaadi pinda kujutav pilt). Värvide määramiseks valige kuju ja klõpsake nuppu värvid väli atribuutide paanil. Tridiv võimaldab teil määrata kuju iga näo jaoks individuaalsed värvid, kuid selles näites peame kõigi nägude värvi muutmiseks kasutama kogu välja. Selleks sisestage väljale lihtsalt kuusnurkne värvikood ja kinnitage seejärel vajutades Sisenema.
Selles näites on kasutatud värve:
alus: # 0099FF jalad, nupp, telg, käsi ja pea: # F2EEE5 ketas: # fa7f7a
Vinüüli tekstuuri jaoks on protsess sarnane värvide määramisega. Valige ketasilinder ja seejärel klõpsake nuppu pilte väli atribuutide paanil. Kleepige ülemisele väljale vinüülile rakendatava pildi URL ja kinnitage see vajutades Sisenema. Võite kasutada oma pilti või alla laadida selles näites kasutatud pildi.
Teil peaks nüüd olema midagi sellist, mis näeb välja selline.
Renderdamine ja eksportimine
Nüüd, kui plaadimängija on valmis, töötame enne eksportimist selle renderdamise viisil. Klõpsake nuppu Eelvaade atribuutide paani ülaosas olev nupp. Määrake suumi väärtuseks 200 plaadimängija suuremana kuvamiseks. Kujundite mustade ääriste eemaldamiseks minge lehele Piirid sektsiooni ja määrake läbipaistmatuseks väärtus 0. Tulemus peaks välja nägema umbes selline.
Soovime, et plaadimängija valgustatakse ülevalt. Selleks pöörake stseeni nii, et plaadimängija ülaosa oleks suunatud teie poole. Alus peaks välja nägema täiesti ristkülikukujuline. Atribuutide paani tridiv.com/d/4k6sektsioonis heledate ja tumedate väärtuste muutmine taastab stseenis olevad varjud. Muutke valguse väärtuseks 0.
Plaadimängija on nüüd eksportimiseks valmis!
Logo viimistlemine
Oleme valmis teksti logole lisama ja logo animatsiooni looma. Klõpsake nuppu Muuda nupul CodePen vasakul allosas Eelvaade koodi eksportimiseks CodePeni. Oluline on märkida, et Tridivi loodud CSS-kood ei kasuta hankija eesliiteid, seega peate koodi igas brauseris funktsionaalseks muutmiseks kasutama selliseid tööriistu nagu prefixr.com või leaverou.github.io/prefixfree. Alustage JavaScripti paani sulgemisega, kuna me ei kavatse seda kasutada. Eemaldage HTML-i paanil rakendatud stiilimärgend .stseen div.
Laiendage paani CSS ja lisage lõppu järgmine kood:
stseen {muundamine: translateY (-140px) rotateX (-55deg); }
Siin, tõlkima Y (-140px) liigutab plaadilauda 140 pikslit ülespoole, jättes ruumi selle all olevale tekstile. Siis pöörataX (-55deg) määrab pöördlaua vertikaalse kalde.
Teksti lisamiseks peate lisama a .pealkiri div kohe pärast avamist #tridiv div paanil HTML. Sees lisage kaks ulatub> (.pealkiri ja .pealkiri), eraldatud tähega hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Seejärel peate rakendama õigeid fonte ja stiile. Importige paanis CSS logos kasutatav font Open Sans ja lisage tekstielementide põhistiilid.
@impr url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Tekstiploki tsentreerimine + fondi põhistiilid * / pealkiri {asend: absoluutne; ülaosa: 50%; vasakul: 50%; veeris: 0 0 0 -165 pikslit; laius: 330px; kõrgus: 5em; font-family: ’Open Sans’, sans-serif; fondi kaal: 300; fondi suurus: 24 pikslit; teksti joondamine: keskel; kirjavahe: 1,5em; värv: # 0099FF; } pealkiri hr {border: 1px solid # fa7f7a; varu: .75em 0; } pealkirja ulatus {display: block; } .main-title {font-size: 2.15em; }. alapealkiri {teksti taane: .25em; }
Voilà! Teie logo on valmis. See peaks välja nägema umbes selline nagu allpool olev pilt. Kui teie 3D-mudel on valmis, saate kasutada CSS-i jõudu selle paremaks muutmiseks, lisades stiile, animatsioone või hiire sündmusi: kohtlege 3D-mudelit lihtsalt nagu kõiki teisi HTML-elemente.
Animeerige logo
Vaadake animatsiooni animatsiooni abil siin. Kui plaadimängija osad sisse kukuvad, on neil kõigil sama võtmekaadri animatsioon erinevate viivitustega. Kujundite ülemine atribuut on seatud 50%. Langeva efekti loomiseks animeerime ülemise atribuudi -400px kuni 50%:
@ võtmekaadrid langevad {0% {top: -400px; } / * Alustame animatsiooni paigutades kuju kõrgusele 400 pikslit * / 100% {top: 50%; } / * siis lõpetame selle algsel positsioonil * /}
Selle animatsiooni saate lisada kõikidele kujunditele järgmiselt:
. kuju {ülemine: -400px; animatsioon: sügis 1s kergendab 0s edasiliikumist; }
Määrake ülemise atribuudi väärtuseks -400px ja lisage viivitus:
.platter {animatsiooni viivitus: 1.05s; } .disc {animatsiooni viivitus: 1.35s; } .nupp {animatsiooni viivitus: 1,5 s; } ...
Looge viimane põrgeefekt, kasutades pöörataX atribuut:
90% {muundamine: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {muundamine: tõlkimineY (-4em) pööramineX (620deg) pööramineY (0deg); } 100% {muundamine: tõlkimineY (-4,5em) pööramineX (660deg) pööramineY (0deg); }
Nii lõime selle konkreetse versiooni, kuid pidage meeles: piiranguid pole!
Sõnad: Julian Garnier
See artikkel ilmus algselt ajakirja netiväljaandes 248.
