Inhalt
- Ufänken
- Erstellt d'Basis vun der Dréi
- Schafen d'Féiss
- Den Aarm an de Kapp
- Faarwen an Texturen
- Rendering an Export
- De Logo fäerdeg
- Animéiert de Logo
Et gi verschidde Weeër fir 3D Animatioun um Internet ze kreéieren, déi meescht vun hinnen erfuerderen e gutt Wëssen iwwer JavaScript a WebGL, oder d'Benotzung vun engem Plug-in wéi Flash. Dank CSS 3D Transformatiounen ass et méiglech 3D mat nëmme HTML an CSS ze kreéieren, awer et ass net einfach dat ze maachen. Tridiv, meng gratis Online App, vereinfacht de Prozess, bitt eng einfach an intuitiv WYSIWYG Interface déi et erméiglecht Benotzer 3D Objeten ze kreéieren ouni eng eenzeg Zeil Code ze schreiwen.
An dësem Tutorial wäerte mir e Logo fir 'Tridiv Records', e fiktive Plackelabel, erstellen an nëmmen HTML an CSS benotzen. D'Haaptvisuell fir de Logo gëtt am 3D mat Tridiv erstallt. Duerno addéiere mer déi typographesch Elementer mat normaler HTML an CSS.
Dir kënnt déi lescht Animatioun an de Code gesinn, deen se hei generéiert.
Ufänken
Mir fänken un mat der Erstellung vun der Dräieck am 3D mat Tridiv. Gitt op tridiv.com a start d'App. Dir musst entweder Chrome, Safari oder Opera 15 (oder méi spéit) benotzen.
Ier Dir ufänkt, ass et wichteg d'Tridiv Interface ze verstoen. D'Haaptdeel vum Editeur ass aus véier Usiichten zesummegesat: uewe lénks ass d'3D-Vue, déi eng komplett Vue op d'Zeen ubitt. Déi aner dräi Usiichte weisen et vun uewen, Säit a vir. Mat dësen dräi Usiichten kënnt Dir 3D Formen erstellen, änneren an réckelen.
D'horizontal Toolbar ass an zwee Deeler opgedeelt: de lénksen Deel weist Informatiounen zu Ärem Dokument; de richtegen Deel enthält Tools fir Formen z'änneren an z'änneren. Den Beweegt Auswiel an Änneren Auswiel Knäppercher schalt tëscht de verschiddene Redaktioun Modi.
D'Eegenschaftsfenster (d'Sidebar) weist Dokumentastellungen wéi Zoom a Snap op Gitter, an d'Eegeschafte vun der gewielter Form (Gréisst, Positioun, Rotatioun, Faarf, a sou weider). D'Eenheet fir Dimensiounen a Positioun benotzt ass ems; d'Rotatiounswénkele sinn a Grad.
Fir all Duercherneen herno am Tutorial ze vermeiden, benotze mir folgend Kierzunge:
w = Breet h = Héicht d = Déift Diam = Duerchmiesser x deg = Rotatioun an der x-Achs y deg = Rotatioun an der y-Achs z deg = Rotatioun an der z-Achs
Erstellt d'Basis vun der Dréi
Fänkt un mam Zoomwäert op 200 ze setzen. Fir ze hëllefen d'Formen ze zeechnen, aktivéiert de Snap to Grid Astellung an der Dokumentastellungen Sektioun vun der Sidebar. Setzt de Schnappwäert op 0.125.
D'Basis vum Dréibänk besteet aus engem einfache kuboid, da klickt op Dobäizemaachen cuboid Knäppchen an der Top Toolbar. Dir sollt de Kuboid an alle véier Usiichten am Editor gesinn.
Rename d'Form op Basis mam Nummfeld vun der Eegeschaftsfënster (ënner Form Properties). Den Numm vun der Form muss e gëltegen CSS Klassenname sinn, well et gëtt am Code benotzt deen vum Editor generéiert gëtt. Mir benotzen dës Klassennimm méi spéit beim Animéiere vum Logo, also gitt sécher datt Dir all nei Form nennt, déi Dir richteg erstellt.
Wann de Kuboid benannt ass, gitt sécher datt et an der Uewersiicht ausgewielt gëtt (et sollt blo beliicht sinn, mat engem kreesfërmege Rank vun Tools ronderëm), da klickt op Änneren Knäppchen uewen um Rank fir d'Ännerungsgrëff ze weisen. Zitt d'Kontrollgrëff op de Säiten vum Kuboid, bis d'Breet an d'Déift erreechen w = 10 an d = 8 an Form Properties.
Klickt op d'Form bannent der Säitevue. Dëst weist d'Redaktiounshandwierker an dëser Vue, et erlaabt eis hir Héicht z'änneren. Ajustéiert d'Héicht bis se erreecht h = 2. Dir kënnt och Wäerter direkt an den Eegenschaftsfenster tippen. Fir d'Ecken vum Kuboid ofzeschléissen, ännert d'Eckenwäerter am Eegenschaftsfeld op 1.75, dréckt dann op [Enter] Schlëssel fir d'Ännerungen anzesetzen. Dir wäert esou eppes hunn.
Schafen d'Féiss
Fir d'Féiss vun der Dréiaarbechter gi mir Zylinder. Füügt en Zylinder bäi, ännert dann säin Duerchmiesser op Diam = 1,75 a seng Héicht ze h = 0,5. Klickt op de Beweegt Selektiounsknäppchen an der Top Toolbar fir dat verschleppbart Gebitt op der Form ze weisen. Beweegt den Zylinder ënner der Basis, plazéiert en an ee vun den Ecken. (Dir musst et vläicht uewen, op der Säit a virun der Vue réckelen.)
Duplizéiert den Zylinder (dréckt de Duplizéieren Knäppchen am kreesfërmege Rank vun Tools, oder dréckt op de D Schlëssel) a fir den neien Zylinder an en aneren Eck vun der Basis ze réckelen. Widderhuelen de Prozess bis all véier Féiss richteg positionéiert sinn. Vergiesst net d'Zylinder ze nennen (zum Beispill Féiss-lénks-Top, Féiss-riets-uewen, Féiss-lénks-ënnen, Féiss-lénks-Top). Wann Dir dat gemaach hutt, sollt d'Resultat esou ausgesinn.
Mir kucken elo no der Schafung vun der Platte, Scheif, Aarmachs a Knäppchen. De Prozess fir d'nächst Formen ze kreéieren ass ähnlech wéi dee fir d'Féiss. Hei sinn d'Dimensiounen déi fir déi verschidden Zylinder benotzt ginn:
Plateau: Diam = 7; h = 0,5 Scheif: Diam = 6,75; h = 0,25 Knäppchen: Diam = 1,5; h = 0,25 Aarmachs-Basis: Diam = 2,25; h = 0,25 Aarmachs: Diam = 1.375; h = 1
Fir d'Säiten vun den Zylinder ze verfeineren, kënnt Dir d'Zuel vun de Gesiichter an all eenzel erhéijen, andeems Dir d'Säitefeld am Eegenschaftsfenster benotzt. Füügt net ze vill Säite bäi, well dëst kann d'global Leeschtung vum Editeur an déi lescht Animatioun negativ beaflossen. An dësem Fall géif ech Iech roden net méi wéi 32 Säiten fir d'Platte an d'Disk ze benotzen. Dir sollt esou eppes hunn.
Den Aarm an de Kapp
Fir den Aarm an de Kapp vun der Dréibänk, gi mir Kuboiden. Fir den Aarm erstallt e Kuboid (w = 0,25; h = 0,25; d = 4), da maacht eng Rotatioun vun -33° um y-Achs. Fir de Kapp erstallt e Kuboid (w = 0,5; h = 0,5; d = 1), da maacht eng Rotatioun vun -33° um y-Achs. Alignéiert béid Formen mam Aarmachs-Zylinder. D'Resultat sollt esou ausgesinn.
Faarwen an Texturen
Mir si bal fäerdeg mam Dräieck. De leschte Schrëtt ass Faarwen zouzeginn an eng Textur op de Vinyl anzesetzen (e Bild dat d'Uewerfläch vum Record duerstellt). Fir Faarwen zouzeginn, wielt eng Form a klickt op de Faarwen Feld am Eegenschaftsfeld. Tridiv erlaabt Iech individuell Faarwen fir all Gesiicht vun enger Form ze spezifizéieren, awer an dësem Beispill musse mir de ganze Feld benotze fir d'Faarf vun alle Gesiichter z'änneren. Fir dëst ze maachen, gitt just en Hex Faarfcode am Feld, da bestätegt duerch Press Gitt eran.
Hei sinn d'Faarwen an dësem Beispill benotzt:
Basis: # 0099FF Féiss, Knäppchen, Achs, Aarm a Kapp: # F2EEE5 Scheif: # fa7f7a
Fir d'Textur vum Vinyl ass de Prozess ähnlech wéi d'Faarwen zouzeginn. Wielt den Disc-Zylinder a klickt dann op de Biller Feld am Eegenschaftsfeld. Paste d'URL vum Bild dat Dir op de Vinyl an den Top Feld uwenden wëllt a bestätegen andeems Dir dréckt Gitt eran. Dir kënnt en eegene Bild benotze oder deen deen an dësem Beispill benotzt gëtt eroflueden.
Dir sollt elo eppes hunn dat sou ausgesäit.
Rendering an Export
Elo wou den Dräieck fäerdeg ass, wäerte mir um Wee schaffen, wéi en ofgebaut gëtt ier en exportéiert gëtt. Klickt op de Virschau Knäppchen uewen op der Eegeschaftsfënster. Setzt de Zoomwäert op 200 fir den Dräieck méi grouss ze weisen. Fir déi schwaarz Grenze vun de Formen ewechzehuelen, gitt op de Grenzen Sektioun vum Fënster a setzt d'Opazitéit op 0. D'Resultat sollt sou eppes ausgesinn.
Mir wëllen datt d'Turntable vun uewe beliicht gëtt. Fir dëst ze maachen, rotéiert d'Zeen sou datt de Top vun der Dréihmaschinn op Iech steet. D'Basis sollt perfekt rechteckeg ausgesinn. D'Liicht an d'donkel Wäerter z'änneren an der tridiv.com/d/4k6sektioun vun der Eegeschaftsfënster wäert d'Schatten an der Szen regeneréieren. Ännert de Liichtwäert op 0.
D'Turntable ass elo prett fir ze exportéieren!
De Logo fäerdeg
Mir si prett fir den Text op de Logo bäizefügen an d'Logo-Animatioun ze kreéieren. Klickt op de Änneren op CodePen Knäppchen ënnen lénks vun der Virschau Vue fir de Code op CodePen ze exportéieren. Et ass wichteg ze bemierken datt den CSS Code generéiert vun Tridiv keng Verkeefer Präfixe benotzt, sou datt Dir Tools wéi prefixr.com oder leaverou.github.io/prefixfree benotze musst fir de Code funktionell an all Browser ze maachen. Fänkt un d'Javascript Fënster zouzemaachen, well mir se net benotzen. An der HTML Fënster, huelt de Stil Tag op de .Zeen div.
Erweidert d'CSS-Fënster a füügt de folgende Code um Enn bäi:
.scene {transforméieren: iwwersetzenY (-140px) rotéierenX (-55deg); }
Hei, den iwwersetzenY (-140px) réckelt d'Turntable 140px no uewen, léisst Plaz fir den Text drënner. Dunn huet den rotateX (-55deg) setzt déi vertikal Neigung vum Dréiaarbechten.
Fir den Text bäizefügen, musst Dir e bäifügen .titel div direkt no der Ouverture #tridiv div am HTML-Fenster. Bannen, füügt zwee derbäi Spannen> (.main-title an .sub-title), getrennt vun hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Dir musst dann déi richteg Schrëften a Stiler uwenden. Am CSS-Fenster importéiert d'Open Sans Schrëft, déi am Logo benotzt gëtt, a füügt d'Basis Stiler fir d'Textelementer bäi.
@ Import URL (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Textblockéierung + Basis Schrëftstil * / Titel {Positioun: absolut; uewen: 50%; lénks: 50%; Spillraum: 0 0 0 -165px; Breet: 330px; Héicht: 5em; Schrëftfamill: 'Open Sans', sans-serif; Schrëftgewiicht: 300; Schrëftgréisst: 24px; Text-alignéieren: Zentrum; Bréiwerabstand: 1.5em; Faarf: # 0099FF; } Titel hr {Grenz: 1px zolidd # fa7f7a; Spillraum: .75em 0; } Titelspann {Display: blockéieren; } .main-title {Schrëftgréisst: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Äre Logo ass komplett. Et sollt eppes ausgesinn wéi d'Bild hei drënner. Wann Ären 3D Modell fäerdeg ass, kënnt Dir d'Kraaft vum CSS benotzen fir et nach besser ze maachen andeems Dir Stiler, Animatiounen oder Mausevenementer bäifüügt: behandelt just den 3D Modell wéi all aner HTML Element.
Animéiert de Logo
Kuckt eng Animatioun mam Logo hei. Wéi déi Deeler vun der Dréibänk "falen" eran, deele jiddwereen déiselwecht Keyframe Animatioun mat verschiddene Verspéidungen. D'Formen hunn dat Top Attribut ugesat 50%. Fir de falen Effekt ze kreéieren animéiere mir dat Top Attribut vun -400px an 50%:
@keyframes falen {0% {top: -400px; } / * Mir fänken un d'Animatioun déi d'Form op eng Héicht vu 400px positionéiert * / 100% {uewen: 50%; } / * da schléisse mir et op der ursprénglecher Positioun * /}
Dir kënnt dës Animatioun an all d'Forme bäifügen, wéi follegt:
.Form {uewen: -400px; Animatioun: falen 1s erliichtert 0s no vir; }
Setzt den Top Attribut op -400px a füügt e Retard bäi
.Plateau {Animatioun-Verzögerung: 1.05s; } .disk {Animatioun-Verzögerung: 1.35s; } .Knäppchen {Animatioun-Verzögerung: 1.5s; } ...
Erstellt de leschten 'Bounce' Effekt mat der rotéierenX Attribut:
90% {transforméieren: iwwersetzenY (-5em) rotéierenX (780deg) rotéierenY (0deg); } 95% {transforméieren: iwwersetzenY (-4em) rotéierenX (620deg) rotéierenY (0deg); } 100% {transforméieren: iwwersetzenY (-4.5em) rotéierenX (660deg) rotéierenY (0deg); }
Dat ass wéi mir dës speziell Versioun erstallt hunn, awer erënners: et gi keng Grenzen!
Wierder: Julian Garnier
Dësen Artikel erschéngt ursprénglech an der Net Magazin Ausgab 248.
