A component for thick lines in A-Frame.
The component is based on the A-frame component tutorial and THREE.MeshLine.
Here is the adapted smiley face example.
| 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 |
The path, lineWidth and color properties do what you would expect. The lineWidthStyler property needs an explanation, however.
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.
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/andreasplesch/aframe-meshline-component/master/dist/aframe-meshline-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity meshline="lineWidth: 20; path: -2 -1 0, 0 -2 0, 2 -1; color: #E20049"></a-entity>
</a-scene>
</body>Install via NPM:
npm install aframe-meshline-componentThen register and use.
require('aframe');
require('aframe-meshline-component');