https://github.com/vasturiano/three-fatline
A ThreeJS Line object with variable width
https://github.com/vasturiano/three-fatline
Last synced: 3 months ago
JSON representation
A ThreeJS Line object with variable width
- Host: GitHub
- URL: https://github.com/vasturiano/three-fatline
- Owner: vasturiano
- Created: 2019-04-06T23:29:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-30T10:44:06.000Z (about 1 year ago)
- Last Synced: 2025-07-18T15:29:13.787Z (3 months ago)
- Language: JavaScript
- Homepage: https://vasturiano.github.io/three-fatline/example/fat-lines/
- Size: 390 KB
- Stars: 79
- Watchers: 3
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
three-fatline
=============
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
A modularized version of [https://github.com/mrdoob/three.js/tree/master/examples/jsm/lines/](https://github.com/mrdoob/three.js/tree/master/examples/jsm/lines/).
See the [example](https://vasturiano.github.io/three-fatline/example/fat-lines/) ([source](https://github.com/vasturiano/three-fatline/blob/master/example/fat-lines/index.html))
#### Usage Example:
```js
import { Line2, LineGeometry, LineMaterial } from 'three-fatline';
const geometry = new LineGeometry();
geometry.setPositions([-160, 200, 0, 0, -200, 0, 160, 200, 0]); // [ x1, y1, z1, x2, y2, z2, ... ] format
const material = new LineMaterial({
color: 'red',
linewidth: 10, // px
resolution: new THREE.Vector2(640, 480) // resolution of the viewport
// dashed, dashScale, dashSize, gapSize
});
const myLine = new Line2(geometry, material);
myLine.computeLineDistances();
```
[npm-img]: https://img.shields.io/npm/v/three-fatline
[npm-url]: https://npmjs.org/package/three-fatline
[build-size-img]: https://img.shields.io/bundlephobia/minzip/three-fatline
[build-size-url]: https://bundlephobia.com/result?p=three-fatline
[npm-downloads-img]: https://img.shields.io/npm/dt/three-fatline
[npm-downloads-url]: https://www.npmtrends.com/three-fatline