0.0.3 • Published 3 years ago

aframe-thickline-component v0.0.3

Weekly downloads
Last release
3 years ago


Based on aframe-meshline-component, modified to use THREE.BufferGeometry (name change is due to previous ARENA naming).

A component for thick lines in A-Frame.

The component is based on the A-frame component tutorial and THREE.MeshLine.


PropertyDescriptionDefault Value
pathline coordinates-0.5 0 0, 0.5 0 0
lineWidthwidth of line in px10
lineWidthStylerwidth(p) function1
colorline 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 valueeffect
ptaper from nothing to lineWidth at the end
1 - ptaper 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:

  <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>

    <a-entity meshline="lineWidth: 20; path: -2 -1 0, 0 -2 0, 2 -1; color: #E20049"></a-entity>

NPM Installation

Install via NPM:

npm install aframe-meshline-component

Then register and use.