Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 2,338 Commits
.github		.github
build		build
extras		extras
src		src
tests		tests
utils		utils
wiki		wiki
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
deploy.sh		deploy.sh
package.json		package.json
tsconfig.json		tsconfig.json
types.d.ts		types.d.ts

Repository files navigation

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, and svg.

Home •Releases •Examples •Documentation • Change Log •Help

Usage

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>

Custom Build

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 install

This 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/build

And the resulting/build/two.js and/build/two.min.js will be updated to your specification.

Using ES6 Imports

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.

Running in Headless Environments

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.js

Now 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();

Build Documentation

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.

Change Log

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.