PIXI js 3DTdl jsWebGL 2PixiJS

Two.js • Homepage

文章推薦指數： 80 %
投票人數：10人

# Two.js ... A two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple ... #Two.jsAtwo-dimensionaldrawingapigearedtowardsmodernwebbrowsers.Itisrendereragnosticenablingthesameapitodrawinmultiplecontexts:svg,canvas,andwebgl. Github Sponsor #DownloadDownload Development 56KB Production 43KB TIPPriortov0.7.0-alpha.1Two.jsrequiresUnderscore.jsandBackbone.jsEvents.Ifyou'realreadyloadingthesefileselsewherethenyoucanbuildtheprojectyourselfandgetthefilesizeevensmaller.Formoreinformationoncustombuildscheckoutthesourceongithub.Node.jsVersionwithnpm:npminstall--savetwo.js@latest #OverviewOverview#FocusonVectorShapesTwo.jsisdeeplyinspiredbyflatmotiongraphics(opensnewwindow).Asaresult,two.jsaimstomakethecreationandanimationofflatshapeseasierandmoreconcise.#ScenegraphAtitscoretwo.jsreliesonascenegraph(opensnewwindow).Thismeansthatwhenyoudraworcreateanobject(aTwo.PathorTwo.Group),twoactuallystoresandremembersthat.Afteryoumaketheobjectyoucanapplyanynumberofoperationstoit—e.g:rotation,position,scale,etc..#AnimationLoopTwo.jshasabuiltinanimationloop.Itissimpleinnatureandcanbeautomatedorpairedwithanotheranimationlibrary.Formoreinformationcheckouttheexamples.#SVGInterpreterTwo.jsfeaturesaScalableVectorGraphics(opensnewwindow)Interpreter.ThismeansdevelopersanddesignersalikecancreateSVGelementsincommercialapplicationslikeAdobeIllustrator(opensnewwindow)andbringthemintoyourtwo.jsscene.Formoreinformationcheckouttheexamples.#FriendswithBitmapImageryDespiteitsearlyfocusoneasingvectorshapecreationandanimation,Two.jsoffersmanyeasy-to-usefeaturestohandleandrenderbitmapimages.Easilyloadsingleimages,spritesheets,andimagesequenceswithjustafewmethodcalls.#BasicUsageBasicUsageInordertostartanyofthesedemosyou'llwanttodownloadtwo.jsandaddittoyourHTMLdocument.Oncedownloadedaddthistagtothe

ofyourdocument:.Whenyouvisitthepage,youshouldbeabletoopenuptheconsoleandtypeTwo.Ifthisreturnsafunction(andnotanerror)thenyou'rereadytobegin!#DrawingYourFirstShapesDrawingYourFirstShapesBeforewegetintoallthefancyanimatingit'sgoodtogetafeelforhowtomakeshapesintwo.js.Inordertodothisweneedtohaveaninstanceoftwo.Thissetsupadomelementthatcontainseitheransvgorcanvaselementtoaddtothewebpage.Thetwoobjecthasascenewhichholdsallshapesaswellasmethodsforcreatingshapes.TIPForalistofallpropertiesandconstructionparameterscheckoutthedocumentation.#ShapesandGroupsShapesandGroupsAddingshapestogroupsmakesmanagingmultipleshapeseasierandmoresane.Group'sprovideaneasywaytomoveyourcontentthroughposition,rotation,andscale.Theseoperationsemitfromthecoordinatespace(0,0).Intheexamplebelowwecanseethattheinitialorientationofthecircleandrectanglechangedfromthefirstexample.Theseshapesareorientedaround(0,0),whichallowsustotransformthegrouparoundthecenteroidoftheshapes.InadditionGroup'sstylingoperationstrickledownandapplytoeachshape.#AddingMotionAddingMotionFinally,let'saddsomemotiontoourshapes.Sofartheexamplesusetwo.update();todrawcontenttothescreen.Theinstanceoftwo.jshastwoparticularmethodsforanimation.Thefirstistwo.play();whichcallstwo.update();at60frames-per-second.Thisrate,however,willslowdownifthere'stoomuchcontenttorenderperframe.Thesecondmethodistwo.bind();Thismethodtakesastringasitsfirstparameterindicatingwhateventtolistentoandafunctionasitssecondargumentdelineatingwhattodowhentheeventdescribedinthefirstparameterhappens.Tosyncafunctionwiththeanimationloopsimplyinvoketwo.bind('update',referenceToFunction);asoutlinedbelow:#NextStepsNowthatyougotaquickglimpseintosomeofthefunctionalitytwo.jsoffers,checkouttheofficialandcommunityexamplestoseewhatelseyoucando.Theseexamplesrangefromshowingoffspecificfeaturesofthelibrarytousingthelibraryinotherenvironments,likeReactandAngular.Lookingformoreinformationonaspecificproperty?Thenheadovertothedocumentationwhichoutlinesallofthelibrary'spublicfeatures.Haven'tfoundwhatyou'relookingfor?ThenaskaquestiononourGitHub(opensnewwindow)page.#ProjectCreditsTwo.jsisdependencyfree,butitscreationwouldnothavebeenpossiblewithoutthesegreatcontributionstotheJavaScriptecosystem:Three.js(opensnewwindow)Vuepress(opensnewwindow)Underscore.js(opensnewwindow)Backbone.js(opensnewwindow)QUnit(opensnewwindow)Resemble.js(opensnewwindow)Canvas2Blob(opensnewwindow)jsdoc(opensnewwindow)ESLint(opensnewwindow)rollup.js(opensnewwindow)Two.jsisaprojectbyJono(opensnewwindow)andnumerouscontributors(opensnewwindow)SitedesignbyYuin(opensnewwindow)•SitedevelopmentincollaborationwithTonia(opensnewwindow)PublishedundertheMITLicense(opensnewwindow)©2012–2022

請為這篇文章評分？

延伸文章資訊