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 latest minified library and include it in your html.
<script src="js/two.min.js"></script>
It can also be installed via npm, Node Package Manager:
npm install --save two.js
Alternatively see how to build the library yourself.
Here is boilerplate html in order to draw a spinning rectangle in two.js:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/two.min.js"></script>
</head>
<body>
<script>
var two = new Two({
fullscreen: true,
autostart: true
}).appendTo(document.body);
var rect = 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 uses nodejs 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.js
npm install
This will give you a number of libraries that the development of Two.js relies on. If for instance you only use the SvgRenderer 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.
Running in Headless Environments
As of version v0.7.x Two.js can also run in a headless environment, namely running on the server with the help of a library called Node Canvas. We don't add Node Canvas to dependencies of Two.js because it's not necessary to run it in the browser. However, it has all the hooks setup to run in a cloud environment. To get started follow the installation instructions on Automattic's readme. After you've done that run:
npm install canvas
npm install two.js
Now in a JavaScript file setup your Two.js scenegraph and save out frames whenever you need to:
var { createCanvas, Image } = require('canvas');
var Two = require('two.js')
var fs = require('fs');
var path = require('path');
var width = 800;
var height = 600;
var canvas = createCanvas(width, height);
Two.Utils.shim(canvas, Image);
var time = Date.now();
var two = new Two({
width: width,
height: height,
domElement: canvas
});
var rect = two.makeRectangle(width / 2, height / 2, 50, 50);
rect.fill = 'rgb(255, 100, 100)';
rect.noStroke();
two.render();
var settings = { 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();
Change Log
Two.js has been in operation since 2012. For a full list of changes from its first alpha version built with Three.js to the most up-to-date tweaks. Check out the wiki here.
![[Bug] Cannot import two.js in typescript project](https://avatars.githubusercontent.com/u/35386821?v=4)
![[Question] Is it possible to cite your package used in an academic project?](https://avatars.githubusercontent.com/u/46774289?v=4)
![[Enhancement] Make Canvas Invocations of measureText Node Canvas Compliant](https://avatars.githubusercontent.com/u/220033?v=4)
![[Bug] features not working properly on Two.Texture obj](https://avatars.githubusercontent.com/u/645579?v=4)
then when I resize the window, the image should resize:
but as you can see here, the image seems to be resized but it's not, you can see it tilling when it should be smaller:
7.4k Jan 4, 2023
1.5k Jan 4, 2023
3.3k Jan 4, 2023
10.3k Jan 3, 2023
4.9k Jan 9, 2023
75 Jan 3, 2023
1 Dec 19, 2021
1.3k Dec 25, 2022
2.7k Dec 22, 2022
2.7k Dec 29, 2022
973 Jan 3, 2023
1.8k Dec 30, 2022
2 Aug 18, 2022
1 Apr 13, 2022
18.6k Jan 1, 2023
2.6k Dec 19, 2022
1.2k Dec 29, 2022
1.2k Dec 31, 2022