# aframe-thickline-component
> thick line component for A-frame based on THREE.meshline. based on aframe-meshline-component
Latest version **0.0.3** (published 2021-02-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install aframe-thickline-component
pnpm add aframe-thickline-component
yarn add aframe-thickline-component
bun add aframe-thickline-component
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.3 |
| Published | 2021-02-15 |
| First published | 2021-02-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | conix |
| Keywords | aframe, aframe-component, line, arena-thickline |
## Links
- npm: https://www.npmjs.com/package/aframe-thickline-component
- Repository: https://github.com/conix-center/aframe-thickline-component
- Homepage: https://github.com/conix-center/aframe-thickline-component#readme
- Issues: https://github.com/conix-center/aframe-thickline-component/issues
- npm.io page: https://npm.io/package/aframe-thickline-component
## Alternatives
- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads
## Recent versions
- 0.0.3 (latest) — 2021-02-15
## README
## arena-thickline-component
Based on [aframe-meshline-component](https://github.com/andreasplesch/aframe-meshline-component), modified to use THREE.BufferGeometry (name change is due to previous ARENA naming).
A component for thick lines in [A-Frame](https://aframe.io).
The component is based on the A-frame component tutorial and [THREE.MeshLine](https://github.com/spite/THREE.MeshLine).
### Properties
| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| path | line coordinates | -0.5 0 0, 0.5 0 0 |
| lineWidth | width of line in px | 10 |
| lineWidthStyler | width(p) function | 1 |
| color | line color | #000 |
### Usage
#### Properties
The path, lineWidth and color properties do what you would expect. The lineWidthStyler property needs an explanation, however.
##### lineWidthStyler
The lineWidthStyler property allows for defining the line width as a function of relative position p along the path of the line. By default it is set to a constant 1. The final, rendered width is scaled by lineWidth. You can use p in your function definition. It varies from 0 at the first vertex of the path to 1 at the last vertex of the path. Here are some examples:
| lineWidthStyler value | effect |
| --------------------- | ------ |
| p | taper from nothing to lineWidth at the end |
| 1 - p | taper from lineWidth to nothing at the end |
| 1 - Math.abs(2 * p - 1) | taper to lineWidth at the center from both sides |
| Math.sin( p * 3.1415 ) | smoothly bulge to lineWidth at the center from both sides |
| 0.5 + 0.5 * Math.sin( (p - 0.5) * 2 * 3.1415 * 10 ) | full wave every 10 vertices with lineWidth amplitude |
Use only one expression, and only 'p' as a variable.
Technically, the provided function string is the return argument of a constructed function. It is therefore possible to intentionally do something like 'THREE = null' which will break the scene. As a scene designer, it is thus necessary to be careful about exposing this property to page visitors.
#### Browser Installation
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
#### NPM Installation
Install via NPM:
```bash
npm install aframe-meshline-component
```
Then register and use.
```js
require('aframe');
require('aframe-meshline-component');
```
---
_Source: https://npm.io/package/aframe-thickline-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._