Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

three-line-2d

Package Overview
Dependencies
3
Maintainers
1
Versions
17
Issues
File Explorer

Advanced tools

three-line-2d

lines expanded in a vertex shader

    1.1.6latest

Version published
Maintainers
1
Yearly downloads
20,307
decreased by-12.86%

Weekly downloads

Readme

Source

three-line-2d

stable

img

(click to view demo)

A utility for 2D line drawing in ThreeJS, by expanding a polyline in a vertex shader for variable thickness, anti-aliasing, gradients, line dashes, and other GPU effects.

Works in ThreeJS r69-r75, and possibly newer versions.

See test/index.js for a complete example, as well as other shader applications.

var bezier = require('adaptive-bezier-curve'); var Line = require('three-line-2d')(THREE); var BasicShader = require('three-line-2d/shaders/basic')(THREE); //build a smooth bezier curve in world units var quality = 5; var curve = bezier([0, 0], [0.5, 1], [1, 1], [2, 0], quality); //create our geometry var curveGeometry = Line(curve); //create a material using a basic shader var mat = new THREE.ShaderMaterial(BasicShader({ side: THREE.DoubleSide, diffuse: 0x5cd7ff, thickness: 0.3 })); var mesh = new THREE.Mesh(curveGeometry, mat); app.scene.add(mesh);

Usage

NPM

geometry = Line(path, [opt])

Creates a new Line geometry from a 2D list of points. Options:

  • distances if true, each vertex will also pass a lineDistance attribute to the vertex shader. This can be used to compute the U texture coordinate from the start of the line to its end.
  • closed if true, a segment will be drawn from the last point to the the first point, and the normals will be adjusted accordingly (default false)

Note: You can also omit the path and just pass an opt object to initially construct the geometry. However, some versions of ThreeJS do not support dynamically growing vertex data, so it's best to pass an initial list of points with the maximum capacity of your desired line.

geometry.update(path[, closed])

Updates the geometry with the new 2D polyline, which can optionally be a closed loop (default false).

Running from Source

git clone https://github.com/mattdesl/three-line-2d.git cd three-line-2d npm install

You can run the demo locally on localhost:9966 with:

npm run start

You can build the demo to a static JavaScript bundle with:

npm run build

Changelog

1.1.0

  • Major code cleanup and new test with cleaner modules
  • Support r69-r75
  • It seems like ThreeJS does not support dynamically growing geometry across all versions; use with care!

License

MIT, see LICENSE.md for details.

Keywords

FAQs

What is three-line-2d?

lines expanded in a vertex shader

Is three-line-2d popular?

The npm package three-line-2d receives a total of 150 weekly downloads. As such, three-line-2d popularity was classified as not popular.

Is three-line-2d well maintained?

We found that three-line-2d demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 28 Sep 2016
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc