jonobr1 / two.js

Two.js [![NPM Package][npm]][npm-url] [![Build Size][build-size]][build-size-url] [![NPM Downloads][npm-downloads]][npmtrends-url] 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 • Changelog • Help Usage Download the latest minified library and include it in your html. It can also be installed via npm, Node Package Manager: Alternatively see how to build the library yourself. Here is boilerplate html in order to draw a spinning rectangle in two.js: 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: This will give you a number of libraries that the development of Two.js relies on. If for instance you only use the then you can really cut down on the file size by excluding the other renderers. To do this, modify to only add the files you'd like. Then run: And the resulting and will be updated to your specification. --- Using ES6 Imports As of version Two.js is compatible with EcmaScript 6 imports. This is typically employed in contemporary frameworks like React and Angular as well as bundling libraries like webpack, esbuild, and gulp. This adaptation of the boilerplate can be found on CodeSandbox: 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: _While useful, the main import of the 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 version 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 set up to run in a cloud environment. To get started follow the installation instructions on Automattic's readme. After you've done that run: Now in a JavaScript file set up your Two.js scenegraph and save out frames whenever you need to: Build Documentation The Two.js website is bundled with this repository. Relying on Vuepress the repository generates a website based on numerous files housed in the directory. Use the following the node commands as follows: N.B: Vuepress is a legacy library and as such these commands rely on an older version of Node. Run if you get errors. If you don't use Node Version Manager then see 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 with Three.js to the most up-to-date tweaks. Check out the wiki here. --- And a big thank you to our sponsors who include: Epilogue Press [npm]: https://img.shields.io/npm/v/two.js [npm-url]: https://www.npmjs.com/package/two.js [build-size]: https://badgen.net/bundlephobia/minzip/two.js [build-size-url]: https://bundlephobia.com/result?p=two.js [npm-downloads]: https://img.shields.io/npm/dt/two.js [npmtrends-url]: https://www.npmtrends.com/two.js