Obsah
- Začíname
- Vytvorenie základne otočného taniera
- Vytváranie chodidiel
- Ruka a hlava
- Farby a textúry
- Rendrovanie a export
- Dokončenie loga
- Animujte logo
Existuje niekoľko spôsobov, ako vytvoriť 3D animáciu na webe, pričom väčšina z nich vyžaduje dobrú znalosť jazyka JavaScript a WebGL alebo použitie doplnku ako Flash. Vďaka transformáciám CSS 3D je možné vytvárať 3D iba pomocou HTML a CSS, ale nie je to ľahké. Tridiv, moja bezplatná online aplikácia, zjednodušuje postup a ponúka jednoduché a intuitívne rozhranie WYSIWYG, ktoré umožňuje používateľom vytvárať 3D objekty bez nutnosti písania jediného riadku kódu.
V tomto výučbe vytvoríme a animujeme logo fiktívnej nahrávacej spoločnosti Tridiv Records, ktorá bude používať iba HTML a CSS. Hlavný vizuál loga bude vytvorený v 3D pomocou programu Tridiv. Potom pridáme typografické prvky pomocou bežných HTML a CSS.
Tu si môžete pozrieť výslednú animáciu a kód, ktorý ju generuje.
Začíname
Začneme vytvorením gramofónu v 3D pomocou aplikácie Tridiv. Prejdite na tridiv.com a spustite aplikáciu. Budete musieť používať prehliadač Chrome, Safari alebo Opera 15 (alebo novší).
Pred začatím je dôležité porozumieť rozhraniu Tridiv. Hlavná časť editora sa skladá zo štyroch pohľadov: vľavo hore je 3D pohľad, ktorý poskytuje kompletný pohľad na scénu. Ostatné tri pohľady to ukazujú zhora, zboku a spredu. Pomocou týchto troch pohľadov môžete vytvárať, upravovať a presúvať 3D tvary.
Horizontálny panel s nástrojmi je rozdelený na dve časti: ľavá časť zobrazuje informácie týkajúce sa vášho dokumentu; pravá časť obsahuje nástroje na vytváranie a úpravu tvarov. The Hýbte sa výber a Upraviť výberové tlačidlá prepínajú medzi rôznymi režimami úprav.
Na paneli vlastností (bočný panel) sa zobrazujú nastavenia dokumentu, ako je zväčšenie a prichytenie k mriežke, a vlastnosti vybraného tvaru (veľkosť, poloha, rotácia, farba atď.). Jednotkou používanou pre rozmery a polohu je ems; uhly otočenia sú v stupňoch.
Aby sme sa vyhli akýmkoľvek nejasnostiam neskôr v tomto výučbe, použijeme nasledujúci skratku:
w = šírka h = výška d = hĺbka diam = priemer x deg = rotácia v osi x y deg = rotácia v osi y z deg = rotácia v osi z
Vytvorenie základne otočného taniera
Začnite nastavením hodnoty zväčšenia na 200. Ak chcete kresliť tvary, aktivujte nastavenie prichytenia k mriežke v Nastavenia dokumentu časť bočného panela. Nastavte hodnotu prichytenia na 0.125.
Podstavec točne sa skladá z jednoduchého kvádra, takže kliknite na ikonu Pridajte kváder na hornom paneli nástrojov. Kváder by ste mali vidieť vo všetkých štyroch zobrazeniach editora.
Premenujte tvar na základňa pomocou poľa názvu na paneli vlastností (pod Vlastnosti tvaru). Názov tvaru musí byť platný názov triedy CSS, pretože sa použije v kóde vygenerovanom editorom. Tieto názvy tried budeme neskôr používať pri animácii loga, takže nezabudnite správne pomenovať všetky nové tvary, ktoré vytvoríte.
Keď je kváder pomenovaný, uistite sa, že je vybratý v pohľade zhora (mal by byť zvýraznený modrou farbou a okolo neho kruhový krúžok s nástrojmi), potom kliknite na Upraviť tlačidlo v hornej časti krúžku, aby sa zobrazili úchytky na úpravy. Potiahnite ovládacie páky po stranách kvádra, kým nedosiahnete šírku a hĺbku w = 10 a d = 8 v Vlastnosti tvaru.
Kliknite na tvar vo vnútri bočného pohľadu. Toto zobrazí úchytky na úpravy v tomto zobrazení, čo nám umožní zmeniť jeho výšku. Výšku upravujte, kým nedosiahne h = 2. Hodnoty môžete zadávať aj priamo do podokna vlastností. Ak chcete zaobliť rohy kvádra, zmeňte hodnoty rohov v podokne vlastností na 1.75, potom stlačte [Enter] kľúč na uplatnenie zmien. Budeš mať niečo také.
Vytváranie chodidiel
Na nohy točny použijeme valce. Pridajte valec a potom zmeňte jeho priemer na priemer = 1,75 a jeho výška do h = 0,5. Klikni na Hýbte sa výberové tlačidlo na hornom paneli nástrojov, aby sa zobrazila ťahateľná oblasť na tvare. Posuňte valec pod základňu a umiestnite ho do jedného z rohov. (Možno ho budete musieť posunúť v hornom, bočnom a čelnom pohľade.)
Duplikujte valec (stlačte Duplikát na kruhovom krúžku nástrojov alebo stlačte D ) a presunúť nový valec do iného rohu základne. Postup opakujte, kým nie sú všetky štyri nohy správne umiestnené. Nezabudnite pomenovať valce (napríklad nohy-vľavo-hore, nohy-pravý-horný, nohy-ľavé-spodné, nohy-vľavo-hore). Keď to urobíte, výsledok by mal vyzerať takto.
Teraz sa pozrieme na vytvorenie taniera, disku, osi ramena a tlačidla. Proces vytvárania ďalších tvarov je podobný ako pre nohy. Tu sú rozmery použité pre rôzne valce:
miska: priemer = 7; h = 0,5 disk: priemer = 6,75; h = 0,25 gombík: priemer = 1,5; h = 0,25 os-rameno-základňa: diam = 2,25; h = 0,25 os ramena: priemer = 1,375; h = 1
Ak chcete spresniť bočné strany valcov, môžete zvýšiť počet tvárí v každej z nich pomocou poľa bočných strán na table vlastností. Nepridávajte príliš veľa strán, pretože to môže negatívne ovplyvniť globálny výkon editora a výslednú animáciu. V takom prípade vám odporúčam nepoužívať viac ako 32 strán platne a disku. Mali by ste mať niečo také.
Ruka a hlava
Na ruku a hlavu točny použijeme kvádre. Pre ruku vytvorte kváder (w = 0,25; h = 0,25; d = 4), potom použite rotáciu o -33° na os y. Pre hlavu vytvorte kváder (w = 0,5; h = 0,5; d = 1), potom použite rotáciu o -33° na os y. Zarovnajte obidva tvary s valcom osi ramena. Výsledok by mal vyzerať takto.
Farby a textúry
S gramofónom sme takmer hotoví. Posledným krokom je priradenie farieb a nanesenie textúry na vinyl (obrázok predstavujúci povrch záznamu). Ak chcete priradiť farby, vyberte tvar a kliknite na ikonu farby pole na table vlastností. Tridiv vám umožňuje určiť jednotlivé farby pre každú tvár tvaru, ale v tomto príklade musíme na zmenu farby všetkých tvárí použiť pole všetko. Stačí do poľa zadať hexadecimálny farebný kód a potvrdiť stlačením Zadajte.
Tu sú farby použité v tomto príklade:
základňa: # 0099FF nohy, gombík, os, ruka a hlava: # disk F2EEE5: # fa7f7a
Pre textúru vinylu je proces podobný ako priraďovanie farieb. Vyberte valec disku a potom kliknite na ikonu snímky pole na table vlastností. Do horného poľa vložte adresu URL obrázka, ktorý chcete použiť, na vinyl a potvrďte stlačením Zadajte. Môžete použiť svoj vlastný obrázok alebo si stiahnuť obrázok použitý v tomto príklade.
Teraz by ste mali mať niečo, čo vyzerá takto.
Rendrovanie a export
Teraz, keď je gramofón hotový, budeme pred exportom pracovať na spôsobe, akým je vykreslený. Kliknite na ikonu Náhľad v hornej časti podokna vlastností. Nastavte hodnotu zväčšenia na 200 aby sa gramofón zobrazil väčší. Ak chcete odstrániť čierne okraje tvarov, prejdite na ikonu Hranice časti panela a nastavte nepriehľadnosť na 0. Výsledok by mal vyzerať asi takto.
Chceme, aby bol gramofón osvetlený zhora. Za týmto účelom otočte scénu tak, aby horná časť gramofónu smerovala k vám. Základňa by mala vyzerať dokonale obdĺžnikovo. Zmena svetlých a tmavých hodnôt v sekcii tridiv.com/d/4k6 na table vlastností obnoví tiene v scéne. Zmeňte hodnotu svetla na 0.
Gramofón je teraz pripravený na export!
Dokončenie loga
Sme pripravení pridať text k logu a vytvoriť animáciu loga. Kliknite na ikonu Upraviť na tlačidle CodePen v ľavej dolnej časti okna Náhľad pohľad na export kódu do CodePen. Je dôležité poznamenať, že kód CSS vygenerovaný spoločnosťou Tridiv nepoužíva predpony dodávateľov, takže na zaistenie funkčnosti kódu v každom prehliadači budete musieť použiť nástroje ako prefixr.com alebo leaverou.github.io/prefixfree. Začnite zatvorením tably JavaScript, pretože ju nebudeme používať. Na table HTML odstráňte značku štýlu použitú na .céna div.
Rozbaľte tablu CSS a na koniec pridajte nasledujúci kód:
.scene {transformácia: translateY (-140px) rotateX (-55deg); }
Tu je preložiťY (-140px) posúva gramofón 140 pixelov nahor a ponecháva priestor pre text pod ním. Potom rotateX (-55deg) nastavuje vertikálny sklon otočného taniera.
Ak chcete pridať text, musíte pridať a .názov div hneď po otvorení #tridiv div na paneli HTML. Vo vnútri pridajte dve rozpätia> (.hlavný titul a .podtitul), oddelené hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Potom musíte použiť správne písma a štýly. Na table CSS importujte písmo Open Sans použité v logu a pridajte základné štýly pre textové prvky.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centrovanie textového bloku + základné štýly písma * / nadpis {pozícia: absolútna; vrchná časť: 50%; vľavo: 50%; marža: 0 0 0 -165px; šírka: 330px; výška: 5em; font-family: ‘Open Sans’, sans-serif; váha písma: 300; veľkosť písma: 24px; zarovnanie textu: na stred; medzery medzi písmenami: 1,5em; farba: # 0099FF; } title hr {border: 1px solid # fa7f7a; marža: 0,75 em 0; } rozsah názvu {display: block; } .main-title {font-size: 2.15em; } .podtitul {odsadenie textu: .25em; }
Voilà! Vaše logo je úplné. Malo by to vyzerať asi ako na obrázku nižšie. Akonáhle je váš 3D model hotový, môžete využiť silu CSS na jeho vylepšenie pridaním štýlov, animácií alebo udalostí myši: s 3D modelom jednoducho zaobchádzajte ako s akýmkoľvek iným prvkom HTML.
Animujte logo
Animáciu pomocou loga nájdete tu. Keď časti gramofónu „zapadnú“, každá z nich má rovnakú animáciu kľúčových snímok s rôznymi oneskoreniami. Tvary majú nastavený horný atribút 50%. Aby sme vytvorili padajúci efekt, animujeme atribút top z -400px do 50%:
@keyframes klesajú o {0% {top: -400px; } / * Spustíme animáciu, ktorá umiestni tvar do výšky 400px * / 100% {hore: 50%; } / * potom to skončíme na pôvodnej pozícii * /}
Túto animáciu môžete pridať ku všetkým tvarom nasledovne:
.shape {top: -400px; animácia: pokles 1 s uľahčí 0 s dopredu; }
Nastaviť vrchný atribút na -400px a pridať meškanie:
.platter {oneskorenie animácie: 1,05 s; }. disk {oneskorenie animácie: 1,35 s; }. tlačidlo {oneskorenie animácie: 1,5 s; } ...
Vytvorte efekt konečného odrazu pomocou rotateX atribút:
90% {transformácia: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transformácia: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transformácia: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Takto sme vytvorili túto konkrétnu verziu, ale pamätajte: neexistujú žiadne obmedzenia!
Slová: Julian Garnier
Tento článok sa pôvodne objavil v čistom čísle časopisu 248.
