aframe-meshline-component
Advanced tools
Readme
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-component
Then register and use.
require('aframe');
require('aframe-meshline-component');
FAQs
thick line component for A-frame based on THREE.meshline.
The npm package aframe-meshline-component receives a total of 10 weekly downloads. As such, aframe-meshline-component popularity was classified as not popular.
We found that aframe-meshline-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.
Security News
The NVD is facing a significant backlog with over 12,500 CVEs awaiting analysis, and more than 50% of known exploited vulnerabilities (KEVs) left unenriched since mid-February.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.