Ábhar
- Ag tosú
- Bun an turntable a chruthú
- Ag cruthú na gcosa
- An lámh agus an ceann
- Dathanna agus uigeachtaí
- Rindreáil agus onnmhairiú
- Ag críochnú an lógó
- Beochan an lógó
Tá bealaí éagsúla ann chun beochan 3D a chruthú ar an ngréasán, an chuid is mó acu a éilíonn eolas maith ar JavaScript agus WebGL, nó breiseán cosúil le Flash a úsáid. A bhuíochas le claochluithe CSS 3D, is féidir 3D a chruthú ag úsáid HTML agus CSS amháin, ach níl sé éasca é sin a dhéanamh. Déanann Tridiv, mo aip ar líne saor in aisce, an próiseas a shimpliú, ag tairiscint comhéadan WYSIWYG simplí agus iomasach a chuireann ar chumas úsáideoirí rudaí 3D a chruthú gan líne amháin cód a scríobh.
Sa rang teagaisc seo, táimid chun lógó a chruthú agus a bheochan do ‘Tridiv Records’, lipéad taifeadta ficseanúil, agus HTML agus CSS amháin á n-úsáid. Tá an príomh-amharc don lógó ag dul a chruthú i 3D ag úsáid Tridiv. Ansin cuirfimid na heilimintí clóghrafaíochta le HTML agus CSS rialta.
Is féidir leat an beochan deiridh agus an cód a ghineann é a fheiceáil anseo.
Ag tosú
Beimid ag tosú tríd an turntable a chruthú i 3D ag úsáid Tridiv. Ceann go tridiv.com agus seol an aip. Beidh ort Chrome, Safari, nó Opera 15 (nó níos déanaí) a úsáid.
Sula dtosaíonn tú, tá sé tábhachtach comhéadan Tridiv a thuiscint. Tá ceithre chuid i bpríomhchuid an eagarthóra: ar an mbarr ar chlé tá an radharc 3D, ag tabhairt léargas iomlán ar an radharc. Taispeánann na trí amharc eile é ón mbarr, ón taobh agus ón tosaigh. Agus na trí amharc seo á n-úsáid agat, is féidir leat cruthanna 3D a chruthú, a chur in eagar agus a bhogadh.
Tá an barra uirlisí cothrománach roinnte ina dhá chuid: taispeánann an chuid ar chlé faisnéis a bhaineann le do dhoiciméad; tá uirlisí sa chuid cheart chun cruthanna a chruthú agus a chur in eagar. Tá an Bog roghnú agus Cuir in Eagar athraíonn cnaipí roghnúcháin idir na modhanna eagarthóireachta éagsúla.
Taispeánann an phána airíonna (an barra taobh) socruithe doiciméad ar nós súmáil isteach agus snap go greille, agus airíonna an chruth a roghnaíodh (méid, suíomh, rothlú, dath, agus mar sin de). Is é ems an t-aonad a úsáidtear le haghaidh toisí agus suíomh; tá na huillinneacha rothlaithe i gcéimeanna.
Chun aon mhearbhall a sheachaint níos déanaí sa rang teagaisc, beimid ag úsáid an ghearrscéil seo a leanas:
w = leithead h = airde d = doimhneacht diam = trastomhas x deg = rothlú san x-ais y deg = rothlú san y-ais z deg = rothlú san ais-z
Bun an turntable a chruthú
Tosaigh tríd an luach súmáil isteach a shocrú go 200. Le cuidiú leis na cruthanna a tharraingt, déan an ribe a ghníomhachtú go suíomh greille sa Socruithe Doiciméid chuid den bharra taobh. Socraigh luach na snap go 0.125.
Tá bonn an turntable comhdhéanta de chiúbóideach simplí, mar sin cliceáil ar an Cuir ciúbóideach leis cnaipe sa bharra uirlisí barr. Ba cheart duit an ciúbóideach a fheiceáil le feiceáil i ngach ceann de na ceithre amharc san eagarthóir.
Athainmnigh an cruth go bonn ag úsáid réimse ainm an phána airíonna (faoi Airíonna Cruth). Ní mór ainm bailí aicme CSS a bheith ar ainm an chruth toisc go n-úsáidfear é sa chód a ghineann an t-eagarthóir. Úsáidfimid na hainmneacha ranga seo níos déanaí agus an lógó á bheochan agat, mar sin déan cinnte go n-ainmníonn tú gach cruth nua a chruthaíonn tú i gceart.
Nuair a bheidh an ciúbóideach ainmnithe, déan cinnte go roghnófar é san amharc barr (ba chóir é a aibhsiú i gorm, le fáinne ciorclach uirlisí timpeall air), ansin cliceáil ar an Cuir in Eagar cnaipe ag barr an fháinne chun na láimhseálacha eagar a thaispeáint. Tarraing na láimhseálacha rialaithe ag taobhanna an chiúbóidigh, go dtí go sroicheann an leithead agus an doimhneacht w = 10 agus d = 8 sa Airíonna Cruth.
Cliceáil ar an gcruth taobh istigh den amharc taobh. Taispeánfaidh sé seo na láimhseálacha eagarthóireachta sa dearcadh seo, rud a ligfidh dúinn a airde a athrú. Coigeartaigh an airde go dtí go sroicheann sé h = 2. Is féidir leat luachanna a chlóscríobh go díreach isteach sa phána airíonna. Chun coirnéil an chiúbóidigh a shlánú, athraigh luachanna na gcoirnéal sa phána airíonna go 1.75, ansin brúigh an [Iontráil] eochair chun na hathruithe a chur i bhfeidhm. Beidh rud éigin mar seo agat.
Ag cruthú na gcosa
Le haghaidh chosa an turntable, beimid ag úsáid sorcóirí. Cuir sorcóir leis, ansin athraigh a thrastomhas go diam = 1.75 agus a airde go h = 0.5. Cliceáil ar an Bog cnaipe roghnúcháin sa bharra uirlisí barr chun an limistéar tarraingthe a thaispeáint ar an gcruth. Bog an sorcóir faoin mbonn, agus cuir i gceann de na coirnéil é. (B’fhéidir go mbeidh ort é a bhogadh sna radharcanna barr, taobh agus tosaigh.)
Déan an sorcóir a dhúbailt (brúigh an Dúblach cnaipe i bhfáinne ciorclach uirlisí, nó brúigh an D. eochair) agus an sorcóir nua a bhogadh go cúinne eile den bhonn. Déan an próiseas arís go dtí go mbeidh na ceithre chos suite i gceart. Ná déan dearmad na sorcóirí a ainmniú (mar shampla, cos-chlé-barr, cos-ceart-barr, troigh-chlé-bun, cos-chlé-barr). Nuair a bheidh sin déanta agat, ba cheart go mbeadh an toradh seo mar seo.
Féachfaimid anois ar an platter, diosca, ais lámh agus cnaipe a chruthú. Tá an próiseas chun na chéad chruthanna eile a chruthú cosúil leis an bpróiseas do na cosa. Seo na toisí a úsáidtear do na sorcóirí éagsúla:
platter: diam = 7; h = 0,5 diosca: diam = 6.75; h = 0,25 cnaipe: diam = 1.5; h = 0,25 lámh-ais-bhonn: diam = 2.25; h = 0,25 lámh-ais: diam = 1.375; h = 1
Chun taobhanna na sorcóirí a bheachtú, is féidir leat líon na n-aghaidheanna i ngach ceann a mhéadú, agus an réimse taobhanna sa phána airíonna a úsáid. Ná cuir an iomarca taobhanna leis mar is féidir leis seo tionchar diúltach a imirt ar fheidhmíocht dhomhanda an eagarthóra agus na beochana deiridh. Sa chás seo, molfaidh mé duit gan níos mó ná 32 thaobh a úsáid don phláta agus don diosca. Ba chóir go mbeadh rud éigin mar seo agat.
An lámh agus an ceann
Maidir le lámh agus ceann an turntable, beimid ag úsáid ciúbanna. Maidir leis an lámh, cruthaigh ciúbóideach (w = 0.25; h = 0.25; d = 4), ansin cuir rothlú de -33° ar an y-ais. Maidir leis an gceann, cruthaigh ciúbóideach (w = 0.5; h = 0.5; d = 1), ansin cuir rothlú de -33° ar an y-ais. Ailínigh an dá chruth leis an sorcóir ais-lámh. Ba chóir go mbeadh an toradh mar seo.
Dathanna agus uigeachtaí
Táimid beagnach déanta leis an turntable. Is é an chéim dheiridh dathanna a shannadh agus uigeacht a chur i bhfeidhm ar an vinil (íomhá a léiríonn dromchla an taifid). Chun dathanna a shannadh, roghnaigh cruth agus cliceáil ar an dathanna réimse sa phána airíonna. Ligeann Tridiv duit dathanna aonair a shonrú do gach aghaidh de chruth, ach, sa sampla seo, caithfimid an réimse uile a úsáid chun dath na n-aghaidheanna go léir a athrú. Chun seo a dhéanamh, ní gá ach cód datha heics a iontráil sa réimse, ansin deimhnigh trí bhrú Iontráil.
Seo na dathanna a úsáidtear sa sampla seo:
bonn: # 0099FF troigh, cnaipe, ais, lámh agus ceann: # diosca F2EEE5: # fa7f7a
Maidir le huigeacht an vinil, tá an próiseas cosúil le dathanna a shannadh. Roghnaigh an sorcóir diosca, ansin cliceáil ar an íomhánna réimse sa phána airíonna. Greamaigh URL na híomhá is mian leat a chur i bhfeidhm ar an vinil sa réimse barr agus deimhnigh trí bhrú Iontráil. Is féidir leat íomhá de do chuid féin a úsáid, nó an ceann a úsáidtear sa sampla seo a íoslódáil.
Ba chóir go mbeadh rud éigin agat anois a bhfuil an chuma air.
Rindreáil agus onnmhairiú
Anois go bhfuil an turntable déanta, beimid ag obair ar an mbealach a dhéantar é sula ndéantar é a onnmhairiú. Cliceáil ar an Réamhamharc cnaipe ar bharr an phána airíonna. Socraigh an luach súmáil isteach go 200 chun an turntable níos mó a thaispeáint. Chun teorainneacha dubha na cruthanna a bhaint, téigh go dtí an Teorainneacha cuid den phána agus socraigh an teimhneacht go 0. Ba cheart go bhféachfadh an toradh rud éigin mar seo.
Ba mhaith linn an turntable a lasadh ón mbarr. Chun seo a dhéanamh, rothlaigh an radharc sa chaoi is go bhfuil barr an turntable os do chomhair. Ba chóir go mbeadh cuma breá dronuilleogach ar an mbonn. Athróidh na luachanna éadroma agus dorcha i bpíosa tridiv.com/d/4k6see an phána airíonna na scáthanna laistigh den radharc. Athraigh an luach solais go 0.
Tá an turntable réidh anois le honnmhairiú!
Ag críochnú an lógó
Táimid réidh chun an téacs a chur leis an lógó agus beochan an lógó a chruthú. Cliceáil ar an Cuir in Eagar ar an gcnaipe CodePen ag bun na láimhe clé den Réamhamharc féachaint leis an gcód a easpórtáil chuig CodePen. Tá sé tábhachtach a thabhairt faoi deara nach n-úsáideann an cód CSS a ghineann Tridiv réimíreanna díoltóra, mar sin beidh ort uirlisí mar prefixr.com nó leaverou.github.io/prefixfree a úsáid chun an cód a fheidhmiú i ngach brabhsálaí. Tosaigh trí phána JavaScript a dhúnadh, mar nílimid chun é a úsáid. Sa phána HTML, bain an chlib stíl a chuirtear i bhfeidhm ar an .radharc div.
Leathnaigh an phána CSS agus cuir an cód seo a leanas leis ag an deireadh:
.scene {translate: translateY (-140px) rotateX (-55deg); }
Seo, an translateY (-140px) bogann sé an turntable 140px suas, ag fágáil seomra don téacs faoi. Ansin, an rotateX (-55deg) leagann sé claonadh ingearach an turntable.
Chun an téacs a chur leis, ní mór duit a .title div ceart tar éis an oscailt #tridiv div sa phána HTML. Taobh istigh, cuir dhá cheann réisí> (.main-teideal agus .sub-title), scartha le hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> TAIFEAD / span> / div>…
Ansin ní mór duit na clónna agus na stíleanna cearta a chur i bhfeidhm. Sa phána CSS, iompórtáil an cló Open Sans a úsáidtear sa lógó, agus cuir na stíleanna bunúsacha do na heilimintí téacs leis.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Lárnú bloc téacs + stíleanna bunúsacha cló * / title {position: absolute; barr: 50%; ar chlé: 50%; corrlach: 0 0 0 -165px; leithead: 330px; airde: 5em; cló-theaghlaigh: ‘Open Sans’, sans-serif; cló-mheáchan: 300; cló-mhéid: 24px; téacs-ailíniú: lár; spásáil litreach: 1.5em; dath: # 0099FF; } teideal hr {border: 1px soladach # fa7f7a; corrlach: .75em 0; } réise teidil {display: block; } .main-title {font-size: 2.15em; } .sub-title {téacs-fleasc: .25em; }
Voilà! Tá do lógó críochnaithe. Ba cheart go bhféachfadh sé rud éigin cosúil leis an íomhá thíos. Nuair a bheidh do mhúnla 3D déanta, is féidir leat cumhacht CSS a úsáid chun é a dhéanamh níos fearr fós trí stíleanna, beochan nó imeachtaí luch a chur leis: ní gá ach an tsamhail 3D a chóireáil mar aon eilimint HTML eile.
Beochan an lógó
Féach beochan ag úsáid an lógó anseo. De réir mar a thiteann na codanna den ‘turntable’ isteach, roinneann gach ceann acu an beochan keyframe céanna le moilleanna éagsúla. Tá an tréith barr socraithe ag na cruthanna 50%. Chun an éifeacht titim a chruthú, beochaimid an tréith barr ó -400px chun 50%:
titeann @keyframes {0% {barr: -400px; } / * Cuirimid tús leis an beochan ag suiteáil an chruth go dtí airde 400px * / 100% {barr: 50%; } / * ansin cuirimid deireadh leis ar a shuíomh bunaidh * /}
Is féidir leat an beochan seo a chur leis na cruthanna go léir, mar a leanas:
.shape {barr: -400px; beochan: titim 1s gan stró 0s ar aghaidh; }
Socraigh an tréith barr go -400px agus cuir moill leis:
.platter {beochan-moill: 1.05s; } .disc {beochan-moill: 1.35s; } .button {beochan-moill: 1.5s; } ...
Cruthaigh an éifeacht deiridh ‘preab’ ag baint úsáide as an rothlúX tréith:
90% {translate: translateY (-5em) rotateX (780deg) rothlú (0deg); } 95% {translate: translateY (-4em) rotateX (620deg) rothlú (0deg); } 100% {translate: translateY (-4.5em) rotateX (660deg) rothlú (0deg); }
Sin mar a chruthaigh muid an leagan áirithe seo, ach cuimhnigh: níl aon teorainneacha ann!
Focail: Julian Garnier
Foilsíodh an t-alt seo ar dtús in eagrán glan iris 248.
