jonobr1/two.js: A renderer agnostic two-dimensional ... - GitHub

Two.js ... A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, ... Skiptocontent {{message}} jonobr1 / two.js Public Notifications Fork 460 Star 7.7k Arendereragnostictwo-dimensionaldrawingapifortheweb. two.js.org License MITlicense 7.7k stars 460 forks Star Notifications Code Issues 41 Pullrequests 2 Actions Security Insights More Code Issues Pullrequests Actions Security Insights Thiscommitdoesnotbelongtoanybranchonthisrepository,andmaybelongtoaforkoutsideoftherepository. dev Branches Tags Couldnotloadbranches Nothingtoshow {{refName}} default Couldnotloadtags Nothingtoshow {{refName}} default 9 branches 32 tags Code Latestcommit jonobr1 Mergepullrequest#629fromcyndra0/issue-628 … 1329c47 Apr30,2022 Mergepullrequest#629fromcyndra0/issue-628 FixTwo.Elementtype 1329c47 Gitstats 2,010 commits Files Permalink Failedtoloadlatestcommitinformation. Type Name Latestcommitmessage Committime .github Updateoutput.md Dec15,2021 build UpdatedBuilds Apr27,2022 extras Mergebranch'dev'intoes6 Nov16,2021 src FixedPath.endingonCurves Apr27,2022 tests UpdatedBuildsandAddedTests Jan12,2022 utils PreparingPublish Apr29,2022 wiki UpdatedDocs Apr29,2022 .eslintrc.json FixingLintIssues Oct7,2021 .gitattributes gitattributes Jul10,2017 .gitignore Addeddataattributesrendering,forcedclassnamesetting Dec17,2021 .npmrc npmrcfornopackage-lock.json Sep17,2017 CODE_OF_CONDUCT.md CreateCODE_OF_CONDUCT.md Mar4,2021 CONTRIBUTING.md CreateCONTRIBUTING.md Mar4,2021 LICENSE ImprovedBuildProcess&DevScript Dec20,2021 README.md FixDocumentationlink Apr17,2022 deploy.sh FixedDeployScriptforSite Nov25,2021 package.json Increment Apr29,2022 tsconfig.json SpecifyParticularStartingFilesforTypesDefinitions Dec20,2021 types.d.ts FixTwo.Elementtype Apr30,2022 Viewcode Two.js Usage CustomBuild UsingES6Imports RunninginHeadlessEnvironments ChangeLog Andabigthankyoutooursponsorswhoinclude: README.md Two.js Atwo-dimensionaldrawingapimeantformodernbrowsers.Itisrendereragnosticenablingthesameapitorenderinmultiplecontexts:webgl,canvas2d,andsvg. Home•Releases•Examples•Documentation• ChangeLog•Help Usage Downloadthelatestminifiedlibraryandincludeitinyourhtml. Itcanalsobeinstalledvianpm,NodePackageManager: npminstall--savetwo.js Alternativelyseehowtobuildthelibraryyourself. Hereisboilerplatehtmlinordertodrawaspinningrectangleintwo.js: CustomBuild Two.jsusesnodejsinordertobuildsourcefiles.You'llfirstwanttoinstallthat.Onceinstalledopenupaterminalandheadtotherepositoryfolder: cd~/path-to-repo/two.js npminstall ThiswillgiveyouanumberoflibrariesthatthedevelopmentofTwo.jsrelieson.IfforinstanceyouonlyusetheSvgRendererthenyoucanreallycutdownonthefilesizebyexcludingtheotherrenderers.Todothis,modify/utils/build.jstoonlyaddthefilesyou'dlike.Thenrun: node./utils/build Andtheresulting/build/two.jsand/build/two.min.jswillbeupdatedtoyourspecification. UsingES6Imports Asofversionv0.7.5+Two.jsiscompatiblewithEcmaScript6imports.ThisistypicallyemployedincontemporaryframeworkslikeReactandAngularaswellasbundlinglibrarieslikewebpack,esbuild,andgulp.ThisadaptationoftheboilerplatecanbefoundonCodeSandbox: importReact,{useEffect,useRef}from"react"; importTwofrom"two.js"; exportdefaultfunctionApp(){ vardomElement=useRef(); useEffect(setup,[]); functionsetup(){ vartwo=newTwo({ fullscreen:true, autostart:true }).appendTo(domElement.current); varrect=two.makeRectangle(two.width/2,two.height/2,50,50); two.bind("update",update); returnunmount; functionunmount(){ two.unbind("update"); two.pause(); domElement.current.removeChild(two.renderer.domElement); } functionupdate(){ rect.rotation+=0.001; } } return; } Inadditiontoimporting,thepublishedpackagesofTwo.jsincludethespecificmodules.So,ifnecessaryyoucanimportspecificmodulesfromthesourcecodeandbundle/minifyforyourselflikeso: import{Vector}from'two.js/src/vector.js'; //InTypeScriptenvironmentsleaveoutthe".js" //whenimportingmodulesdirectly.e.g: import{Vector}from'two.js/src/vector'; Whileuseful,themainimportoftheTwonamespaceimportsallmodules.So,thereisn'tyetpropertreeshakingimplementedforthelibrary,thoughit'sontheroadmap. RunninginHeadlessEnvironments Asofversionv0.7.xTwo.jscanalsoruninaheadlessenvironment,namelyrunningontheserverwiththehelpofalibrarycalledNodeCanvas.Wedon'taddNodeCanvastodependenciesofTwo.jsbecauseit'snotnecessarytorunitinthebrowser.However,ithasallthehookssetuptoruninacloudenvironment.TogetstartedfollowtheinstallationinstructionsonAutomattic'sreadme.Afteryou'vedonethatrun: npminstallcanvas npminstalltwo.js NowinaJavaScriptfilesetupyourTwo.jsscenegraphandsaveoutframeswheneveryouneedto: var{createCanvas,Image}=require('canvas'); varTwo=require('two.js') varfs=require('fs'); varpath=require('path'); varwidth=800; varheight=600; varcanvas=createCanvas(width,height); Two.Utils.shim(canvas,Image); vartime=Date.now(); vartwo=newTwo({ width:width, height:height, domElement:canvas }); varrect=two.makeRectangle(width/2,height/2,50,50); rect.fill='rgb(255,100,100)'; rect.noStroke(); two.render(); varsettings={compressionLevel:3,filters:canvas.PNG_FILTER_NONE}; fs.writeFileSync(path.resolve(__dirname,'./images/rectangle.png'),canvas.toBuffer('image/png',settings)); console.log('Finishedrendering.Timetook:',Date.now()-time); process.exit(); ChangeLog Two.jshasbeeninoperationsince2012.ForafulllistofchangesfromitsfirstalphaversionbuiltwithThree.jstothemostup-to-datetweaks.Checkoutthewikihere. Andabigthankyoutooursponsorswhoinclude: EpiloguePress About Arendereragnostictwo-dimensionaldrawingapifortheweb. two.js.org Topics javascript svg webgl html5 canvas es6 animation renderer vector-graphics rendering-engine scenegraph 2d bitmap-graphics text-rendering Resources Readme License MITlicense Codeofconduct Codeofconduct Stars 7.7k stars Watchers 160 watching Forks 460 forks Releases 27 OfficialStableReleaseofVersion0.8.5 Latest Apr29,2022 +26releases Sponsorthisproject   Sponsor LearnmoreaboutGitHubSponsors Packages1   Contributors41 +30contributors Languages JavaScript 96.7% Vue 2.3% Other 1.0% Youcan’tperformthatactionatthistime. Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession. Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.