diff --git a/src/components/thickline/LICENSE b/src/components/thickline/LICENSE new file mode 100644 index 000000000..602ebee62 --- /dev/null +++ b/src/components/thickline/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Kevin Ngo + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/src/components/thickline/README.md b/src/components/thickline/README.md new file mode 100644 index 000000000..d5a717f98 --- /dev/null +++ b/src/components/thickline/README.md @@ -0,0 +1,72 @@ +## aframe-meshline-component + +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). + +Here is the adapted [smiley face example](https://rawgit.com/andreasplesch/aframe-meshline-component/master/examples/basic/index.html). + + +### 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 +
+