- Notifications
You must be signed in to change notification settings - Fork456
A renderer agnostic two-dimensional drawing api for the web.
License
jonobr1/two.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.
Home •Releases •Examples •Documentation • Change Log •Help
Download the latestminified library and include it in your html.
<scriptsrc="js/two.min.js"></script>
It can also be installed vianpm, Node Package Manager:
npminstall--savetwo.js
Alternatively seehow to build the library yourself.
Here is boilerplate html in order to draw a spinning rectangle in two.js:
<!doctype html><html><head><metacharset="utf-8"><scriptsrc="js/two.min.js"></script></head><body><script>vartwo=newTwo({fullscreen:true,autostart:true}).appendTo(document.body);varrect=two.makeRectangle(two.width/2,two.height/2,50,50);two.bind('update',function(){rect.rotation+=0.001;});</script></body></html>
Two.js usesnodejs in order to build source files. You'll first want to install that. Once installed open up a terminal and head to the repository folder:
cd ~/path-to-repo/two.jsnpm installThis will give you a number of libraries that the development of Two.js relies on. If for instance you only use theSVGRenderer then you can really cut down on the file size by excluding the other renderers. To do this, modify/utils/build.js to only add the files you'd like. Then run:
node ./utils/buildAnd the resulting/build/two.js and/build/two.min.js will be updated to your specification.
As of versionv0.7.5+ Two.js is compatible with EcmaScript 6 imports. This is typically employed in contemporary frameworks likeReact andAngular as well as bundling libraries likewebpack,esbuild, andgulp. This adaptation of the boilerplate can be found onCodeSandbox:
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<divref={domElement}/>;}
In addition to importing, the published packages of Two.js include the specific modules. So, if necessary you can import specific modules from the source code and bundle / minify for yourself like so:
import{Vector}from'two.js/src/vector.js';// In TypeScript environments leave out the ".js"// when importing modules directly. e.g:import{Vector}from'two.js/src/vector';
While useful, the main import of theTwo namespace imports all modules. So, there isn't yet proper tree shaking implemented for the library, though it's on the roadmap.
As of versionv0.7.x Two.js can also run in a headless environment, namely running on the server with the help of a library calledNode Canvas. We don't add Node Canvas to dependencies of Two.js because it'snot necessary to run it in the browser. However, it has all the hooks set up to run in a cloud environment. To get started follow the installation instructions on Automattic'sreadme. After you've done that run:
npm install canvasnpm install two.jsNow in a JavaScript file set up your Two.js scenegraph and save out frames whenever you need to:
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.polyfill(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('Finished rendering. Time took: ',Date.now()-time);process.exit();
TheTwo.js website is bundled with this repository. Relying onVuepress the repository generates a website based on numerousREADME.md files housed in thewiki directory. Use the following the node commands as follows:
npm run docs:generate // Generate README.md filesfor documentation fromsource code commentsnpm run docs:dev // Creates alocal server to generate all documentationnpm run docs:build // Builds out static site and associated files to wiki/.vuepress/dist
N.B: Vuepress is a legacy library and as such these commands rely on an older version of Node. Runnvm use if you get errors. If you don't useNode Version Manager then see.nvmrc to install the correct version of node on your local machine.
Two.js has been in operation since 2012. For a full list of changes from its first alpha version built withThree.js to the most up-to-date tweaks. Check out the wikihere.
About
A renderer agnostic two-dimensional drawing api for the web.