repository·dev·Indexed 27 days ago
https://github.com/jonobr1/two.jsA renderer-agnostic two-dimensional drawing API for modern browsers. It allows developers to write drawing code once and render it using WebGL, Canvas2D, or SVG. The library supports ES6 modules, headless environments via Node Canvas, and includes features for hit testing, SVG path interpretation, and memory management through .dispose() methods. Version v0.8.23.
Two.Gradient is the base class for constructing gradients in Two.js. It is not typically used directly, but rather serves as the foundation for specific gradient types like Two.LinearGradient and Two.RadialGradient.
To construct a gradient, you provide a list of Two.Stop objects which define the fill pattern.
Two.Registry class is an arbitrary utility used to manage a directory of items. In Two.js, it is primarily used for tracking textures. It allows you to store, retrieve, and remove any type of variable using a unique identifier.Two instance with a type of Two.Types.webgl, the library uses Two.WebGLRenderer to render the scenegraph to a <canvas /> via the WebGL API. This renderer extends Two.Events.A Two.Collection is an Array-like object that provides additional event propagation for common array operations. It extends Two.Events, allowing you to listen for changes to the collection's contents or order.
Supported events include:
removed: Triggered by pop, shift, and splice.inserted: Triggered by push, unshift, and splice (when splice is called with more than 2 arguments).order: Triggered by sort and reverse.Two.Group class is used to group multiple objects (such as Two.Path, Two.Text, or Two.RoundedRectangle) together. A group contains a transformation matrix and allows you to apply styles to all its children simultaneously. Note that the group itself does not render to the screen; it only manages its children.Two.SVGRenderer class is used by Two.js when the type is set to Two.Types.svg (the default type). It takes the Two.js scenegraph and renders it to an <svg /> element.v0.7.0-beta.1, Two.Utils.shim was added to properly handle canvas and image element spoofing in headless environments.v0.7.1, you can pass a fitted argument to the Two constructor. When set, the instance will adaptively match the size of its parent element.When using Two.js for client-side rendering, follow these safety practices to mitigate risks from malicious content:
allow-scripts and avoid using inline event handlers.self and trusted CDNs.inline scripts and eval().object-src 'none'.Note: Two.js does not collect user data. If your application handles user content, you are responsible for implementing input validation, rate limiting, and abuse reporting.
Two.js (v0.7.5+) supports ES6 imports, making it compatible with frameworks like React and Angular, and bundlers like webpack or esbuild.
Note: The main Two import includes all modules and does not currently support full tree shaking. To reduce bundle size, you can import specific modules directly from the source paths.
import Two from "two.js";
// To import specific modules for better tree shaking:
import { Vector } from 'two.js/src/vector.js';
// In TypeScript environments, omit the ".js" extension:
import { Vector } from 'two.js/src/vector';You can install Two.js via npm to use it in your projects.
npm install --save two.jsTwo.ZUI constructor to transform a Two.js scene into an interactive interface similar to Google Maps or Adobe Illustrator. You must provide the scene (or a group within the scene) and the HTML element that will receive the interaction events.