Sisältö
- Päästä alkuun
- Levysoittimen pohjan luominen
- Jalkojen luominen
- Käsi ja pää
- Värit ja tekstuurit
- Renderointi ja vienti
- Viimeistellään logo
- Animoi logo
On olemassa useita tapoja luoda 3D-animaatioita verkossa, useimmat niistä edellyttävät hyvää JavaScripti- ja WebGL-tuntemusta tai Flash-kaltaisen laajennuksen käyttöä. CSS 3D -muunnosten ansiosta on mahdollista luoda 3D-kuvia vain HTML: n ja CSS: n avulla, mutta se ei ole helppoa. Tridiv, ilmainen online-sovellukseni, yksinkertaistaa prosessia tarjoamalla yksinkertaisen ja intuitiivisen WYSIWYG-käyttöliittymän, jonka avulla käyttäjät voivat luoda 3D-objekteja kirjoittamatta yhtä koodiriviä.
Tässä opetusohjelmassa aiomme luoda ja animoida logon 'Tridiv Recordsille', kuvitteelliselle levy-yhtiölle, joka käyttää vain HTML: ää ja CSS: ää. Logon pääkuvan luodaan 3D-muodossa Tridivillä. Sitten lisätään typografiset elementit tavallisen HTML: n ja CSS: n avulla.
Näet lopullisen animaation ja sen tuottavan koodin täältä.
Päästä alkuun
Aloitamme luomalla levysoittimen 3D-muodossa Tridivin avulla. Siirry osoitteeseen tridiv.com ja käynnistä sovellus. Sinun on käytettävä joko Chrome, Safari tai Opera 15 (tai uudempaa).
Ennen aloittamista on tärkeää ymmärtää Tridiv-käyttöliittymä. Editorin pääosa koostuu neljästä näkymästä: vasemmassa yläkulmassa on 3D-näkymä, joka tarjoaa täydellisen näkymän näkymästä. Kolme muuta näkymää osoittavat sen ylhäältä, sivulta ja edestä. Näiden kolmen näkymän avulla voit luoda, muokata ja siirtää 3D-muotoja.
Vaakasuora työkalurivi on jaettu kahteen osaan: vasemmassa osassa näkyvät asiakirjaasi koskevat tiedot; oikea osa sisältää työkaluja muotojen luomiseen ja muokkaamiseen. Liikkua valinta ja Muokata valintapainikkeet vaihtavat eri muokkaustilojen välillä.
Ominaisuudet-ruudussa (sivupalkki) näkyvät asiakirjan asetukset, kuten zoomaus ja ruudukkoon napsauttaminen, sekä valitun muodon ominaisuudet (koko, sijainti, kierto, väri ja niin edelleen). Mitat ja sijainti käytetään yksikköinä; kiertokulmat ovat asteina.
Välttääksesi sekaannusta myöhemmin opetusohjelmassa, aiomme käyttää seuraavaa lyhennettä:
w = leveys h = korkeus d = syvyys diam = halkaisija x deg = kierto x-akselilla y deg = kierto y-akselilla z deg = kierto z-akselilla
Levysoittimen pohjan luominen
Aloita asettamalla zoomausarvoksi 200. Voit auttaa piirtämään muotoja aktivoimalla Snap to Grid -asetuksen Asiakirjan asetukset sivupalkin osio. Aseta napsautusarvoksi 0.125.
Levysoittimen pohja koostuu yksinkertaisesta suorakulmiosta, joten napsauta Lisää neliömäinen -painiketta ylätyökalurivillä. Sinun pitäisi nähdä, että neliö näkyy kaikissa muokkausnäkymissä.
Nimeä muoto uudelleen muotoon pohja käyttäen ominaisuusruudun nimikenttää (alla Muotoominaisuudet). Muodon nimen on oltava kelvollinen CSS-luokan nimi, koska sitä käytetään editorin luomassa koodissa. Käytämme näitä luokkien nimiä myöhemmin animoidessamme logoa, joten varmista, että nimeät kaikki uudet muodot, jotka luot oikein.
Kun neliönmuoto on nimetty, varmista, että se on valittu ylänäkymässä (se on korostettava sinisellä, pyöreällä työkalurenkaalla) ja napsauta sitten Muokata -painike renkaan yläosassa näyttääksesi muokkauskahvat. Vedä ohjauskahvoja neliön muotoisilla sivuilla, kunnes leveys ja syvyys ulottuvat w = 10 ja d = 8 että Muotoominaisuudet.
Napsauta sivunäkymässä olevaa muotoa. Tämä näyttää muokkauskahvat tässä näkymässä, jolloin voimme muuttaa sen korkeutta. Säädä korkeutta, kunnes se saavuttaa h = 2. Voit kirjoittaa arvot myös suoraan ominaisuusruutuun. Pyöristää neliön kulmat muuttamalla ominaisuusruudun kulmien arvoksi 1.75ja paina sitten [Tulla sisään] näppäintä muutosten soveltamiseksi. Sinulla on jotain tällaista.
Jalkojen luominen
Levysoittimen jalkoihin aiomme käyttää sylintereitä. Lisää sylinteri ja muuta sen halkaisija diam = 1,75 ja sen korkeus h = 0,5. Klikkaa Liikkua valintapainike ylätyökalurivillä näyttääksesi vedettävän alueen muodossa. Siirrä sylinteri alustan alle ja aseta se yhteen kulmiin. (Saatat joutua siirtämään sitä ylhäältä, sivulta ja edestä.)
Kopioi sylinteri (paina Kopioi -painiketta työkalujen pyöreässä renkaassa tai paina D. avain) ja siirtää uusi sylinteri toiseen alustan kulmaan. Toista prosessia, kunnes kaikki neljä jalkaa ovat oikein paikoillaan. Älä unohda nimetä sylintereitä (esimerkiksi jalat-vasen-yläosa, jalat-oikea-yläosa, jalat-vasen-alaosa, jalat-vasen-yläosa). Kun olet tehnyt niin, tuloksen pitäisi näyttää tältä.
Tarkastellaan nyt lautasen, levyn, käsivarren akselin ja napin luomista. Seuraavien muotojen luominen on samanlainen kuin jalkojen prosessi. Tässä ovat eri sylinterien mitat:
lautanen: diam = 7; h = 0,5 kiekko: diam = 6,75; h = 0,25 painike: diam = 1,5; h = 0,25 käsivarsi-akseli-pohja: diam = 2,25; h = 0,25 käsivarsi-akseli: diam = 1,375; h = 1
Voit parantaa sylinterien sivuja lisäämällä kummankin kasvojen määrää käyttämällä ominaisuusruudun sivukenttää. Älä lisää liikaa sivuja, koska tämä voi vaikuttaa negatiivisesti editorin ja lopullisen animaation maailmanlaajuiseen suorituskykyyn. Tässä tapauksessa suosittelen, ettet käytä yli 32 sivua lautaselle ja levylle. Sinulla pitäisi olla jotain tällaista.
Käsi ja pää
Levysoittimen varteen ja päähän käytämme poikkileikkauksia. Luo käsivarteen neliö (w = 0,25; h = 0,25; d = 4), aseta sitten kierto -33° on y-akseli. Luo päätä varten neliö (w = 0,5; h = 0,5; d = 1), aseta sitten kierto -33° on y-akseli. Kohdista molemmat muodot varren akselin sylinterin kanssa. Tuloksen pitäisi näyttää tältä.
Värit ja tekstuurit
Levysoitin on melkein valmis. Viimeinen vaihe on määrittää värit ja levittää vinyylille tekstuuri (kuva, joka edustaa levyn pintaa). Määritä värit valitsemalla muoto ja napsauttamalla värejä Ominaisuudet-ruudun kenttä. Tridiv antaa sinun määrittää yksittäiset värit muodon jokaiselle kasvolle, mutta tässä esimerkissä meidän on käytettävä all-kenttää muuttamaan kaikkien kasvojen väriä. Voit tehdä tämän kirjoittamalla kenttään kuusikulmion värikoodin ja vahvistamalla sitten painamalla Tulla sisään.
Tässä ovat tässä esimerkissä käytetyt värit:
pohja: # 0099FF jalat, painike, akseli, käsivarsi ja pää: # F2EEE5-levy: # fa7f7a
Vinyylin tekstuurille prosessi on samanlainen kuin värien määrittäminen. Valitse levysylinteri ja napsauta sitten kuvia Ominaisuudet-ruudun kenttä. Liitä yläosaan vinyyliin lisättävän kuvan URL ja vahvista painamalla Tulla sisään. Voit käyttää omaa kuvaa tai ladata tässä esimerkissä käytetyn kuvan.
Sinulla pitäisi nyt olla jotain, joka näyttää tältä.
Renderointi ja vienti
Nyt kun levysoitin on valmis, aiomme työskennellä sen renderöintityypin kanssa ennen sen vientiä. Klikkaa Esikatselu painiketta ominaisuusruudun yläosassa. Aseta zoomausarvoksi 200 näyttää levysoitin isompana. Poista kuvioiden mustat reunat siirtymällä kohtaan Rajat osio ja aseta peittävyys arvoon 0. Tuloksen pitäisi näyttää tältä.
Haluamme, että levysoitin valaistaan ylhäältä. Voit tehdä tämän kääntämällä näkymää siten, että levysoittimen yläosa on sinua kohti. Pohjan tulisi näyttää täydellisesti suorakulmaiselta. Ominaisuudet-ruudun tridiv.com/d/4k6section-osion vaalean ja tumman arvon muuttaminen palauttaa näkymän varjot. Muuta valon arvoksi 0.
Levysoitin on nyt valmis vietäväksi!
Viimeistellään logo
Olemme valmiita lisäämään tekstin logoon ja luomaan logon animaation. Klikkaa Muokata on CodePen - painike vasemmassa alakulmassa Esikatselu viedä koodi CodePeniin. On tärkeää huomata, että Tridivin luomassa CSS-koodissa ei käytetä toimittajan etuliitteitä, joten sinun on käytettävä työkaluja, kuten prefixr.com tai leaverou.github.io/prefixfree, jotta koodi toimisi jokaisessa selaimessa. Aloita sulkemalla JavaScript-ruutu, koska emme aio käyttää sitä. Poista HTML-ruudussa .näkymä div.
Laajenna CSS-ruutua ja lisää seuraava koodi loppuun:
. kohtaus {muunnos: käännä Y (-140 kuvapistettä) rotateX (-55 astetta); }
Tässä käännäY (-140px) siirtää levysoitinta 140 kuvapistettä ylöspäin, jättäen tilaa sen alla olevalle tekstille. Sitten rotateX (-55deg) asettaa kääntöpöydän pystysuoran kaltevuuden.
Lisää teksti lisäämällä a .title div heti avaamisen jälkeen #tridiv div HTML-ruudussa. Lisää sisälle kaksi ulottuu> (.main-title ja .sub-title) erotettuna hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Sitten sinun on käytettävä oikeita fontteja ja tyylejä. Tuo CSS-ruudussa logossa käytetty Open Sans -fontti ja lisää tekstielementtien perustyylit.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Tekstilohkon keskitys + kirjasintyypit * / title {sijainti: absoluuttinen; yläosa: 50%; jäljellä: 50%; marginaali: 0 0 0 -165px; leveys: 330px; korkeus: 5em; font-family: ”Open Sans”, sans-serif; kirjasimen paino: 300; kirjasinkoko: 24 kuvapistettä; tekstin tasaus: keskellä; kirjainten väli: 1,5em; väri: # 0099FF; } title hr (reunus: 1px kiinteä # fa7f7a; marginaali: .75em 0; } otsikkoväli {display: block; } .main-title {font-size: 2.15em; }. alaotsikko {teksti-luetelmakohta: .25em; }
Voilà! Logosi on valmis. Sen pitäisi näyttää jotain alla olevan kuvan kaltaista. Kun 3D-mallisi on valmis, voit käyttää CSS: n tehoa sen parantamiseen entisestään lisäämällä tyylejä, animaatioita tai hiirtapahtumia: kohtele vain 3D-mallia kuten mitä tahansa muuta HTML-elementtiä.
Animoi logo
Katso animaatio, jossa käytetään logoa täällä. Kun levysoittimen osat putoavat sisään, kullakin niistä on sama avainkehysanimaatio eri viiveillä. Muotojen ylempi attribuutti on asetettu 50%. Putoavan vaikutuksen luomiseksi animoimme ylimmän määritteen -400px että 50%:
@ avainkehykset laskevat {0% {top: -400px; } / * Aloitamme animaation asettamalla muodon korkeuteen 400 kuvapistettä * / 100% {alkuun: 50%; } / * sitten lopetamme sen alkuperäiseen sijaintiin * /}
Voit lisätä tämän animaation kaikkiin muotoihin seuraavasti:
.muoto {yläosa: -400px; animaatio: lasku 1s helpottaa 0s eteenpäin; }
Aseta ylimmäksi määritteeksi -400px ja lisää viive:
.platter {animaation viive: 1.05s; } .disc {animaation viive: 1,35 s; } .painike {animaation viive: 1,5 s; } ...
Luo viimeinen palautumisefekti käyttämällä kiertää X attribuutti:
90% {muunnos: käännäY (-5em) rotateX (780deg) rotateY (0deg); } 95% {muunnos: käännäY (-4em) kiertääX (620deg) kiertääY (0deg); } 100% {muunnos: käännäY (-4,5em) rotateX (660deg) rotateY (0deg); }
Näin loimme tämän version, mutta muista: ei ole rajoituksia!
Sanat: Julian Garnier
Tämä artikkeli ilmestyi alun perin verkkolehden numerossa 248.
