{"_id":"@amcdnl/threejs-meshline","_rev":"1-7d4bee922eac97537b36041fc3db7ac5","name":"@amcdnl/threejs-meshline","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@amcdnl/threejs-meshline","version":"1.0.0","private":false,"description":"Mesh replacement for THREE.Line","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/ryanking1809/threejs-meshline.git"},"keywords":["lines","threejs","mesh","line"],"author":{"name":"Jaume Sanchez","email":"the.spite@gmail.com","url":"https://www.clicktorelease.com"},"license":"MIT","bugs":{"url":"https://github.com/ryanking1809/threejs-meshline/issues"},"homepage":"https://github.com/ryanking1809/threejs-meshline#readme","prettier":{"semi":false,"trailingComma":"es5","singleQuote":true,"jsxBracketSameLine":true,"tabWidth":2,"printWidth":120},"gitHead":"6f4f7729f6e53c4de9a01d4591a332f5a9cf1d0a","_id":"@amcdnl/threejs-meshline@1.0.0","_nodeVersion":"13.3.0","_npmVersion":"6.13.7","dist":{"integrity":"sha512-78jgXLYIdb73SdaNm2PWmKqCQetEPj0WRcvf2lZQtDPVumuV6JCVt5YE/SQeVZsvNfwOpat45LNopFZOBzFcdw==","shasum":"02c3e4d67f28c842728259a307288ee5c76fede6","tarball":"https://registry.npmjs.org/@amcdnl/threejs-meshline/-/threejs-meshline-1.0.0.tgz","fileCount":4,"unpackedSize":29025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTW00CRA9TVsSAnZWagAAOS8P/i43T8W+3wg81UdchfKQ\nIer7saAaGElVA/LuxMw1ZnnIHKOX4PI482ZAvli8nuvowGwIGd+7Ad0fiGYO\no5FTTV8Hvl3kCVj6d2yF56i29DaQRGW85DPsaI0mPpHEieZe/BmeODY2UgIg\nBv9ZZiNzRIufA+zl/JsHSBcX5vj5ITRLz2wIW96Y+LDI3+5taqfBQfu6/2lI\nvzRioWYOMlUxGcifxQTMb9mzRAxKRSWVXjBf+BgbKgoJPOjiTd4cMm5xEPq7\nX6myu9vtYVFQ6wca/s+bvG4Eq1c6QPyHtII73MffgtKuNh5xHMA9beECf2Co\nKxxU2yj/dXHOYhUuBnqdOzxfFTeMkyv4t4esf3PRlolkNxOp08O+BvQxDIiT\n2qHHBaSC/E23Eo4gTjzb4KclYP/igA0fVoF5n9B7XWhCGA3OARtH3wUGy+xZ\ndBUrrSvgWvjXTjeQNbAoaC3hiqiEJbvURpDMRNVfFAGS/QHRmMNelW44cbG0\nbiFurm8+ZmEVMXMtq7bNwRRJf0Q9t7X/gYDodC+OoNqU/jBzIYC+1zAvobg7\n9HVpaE9NPx6HWRyXabDwMjm2XgfYSHQyqOpUyDXDnrdK7H16SZNYDFXe28rf\n+gZy4qvMP+eismDZ+Cx5enBFEpStXI4oEX6bjnRUyxgPIJzqQVWVt7dazfa7\nm9wb\r\n=J7Ng\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCniDUZNYwRzzYoOEokz0gKB16FNuvrdL+Mt16Pvj40XwIgGW53ybDkDwOnJGHmGjDfRyjnRVJn2NydJfqKu/3OP+Q="}]},"maintainers":[{"name":"amcdnl","email":"amcdaniel2@gmail.com"}],"_npmUser":{"name":"amcdnl","email":"amcdaniel2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/threejs-meshline_1.0.0_1582132531530_0.8744749349096113"},"_hasShrinkwrap":false}},"time":{"created":"2020-02-19T17:15:31.501Z","1.0.0":"2020-02-19T17:15:31.691Z","modified":"2022-04-04T13:46:55.076Z"},"maintainers":[{"name":"amcdnl","email":"amcdaniel2@gmail.com"}],"description":"Mesh replacement for THREE.Line","homepage":"https://github.com/ryanking1809/threejs-meshline#readme","keywords":["lines","threejs","mesh","line"],"repository":{"type":"git","url":"git+https://github.com/ryanking1809/threejs-meshline.git"},"author":{"name":"Jaume Sanchez","email":"the.spite@gmail.com","url":"https://www.clicktorelease.com"},"bugs":{"url":"https://github.com/ryanking1809/threejs-meshline/issues"},"license":"MIT","readme":"

\n\t\n\t\n

\n\nClick examples above to view the code and the examples found at [THREE.meshline](https://github.com/spite/THREE.MeshLine) will work with this fork.\n\n npm install threejs-meshline\n\nthreejs-meshline is a replacement for `THREE.Line`, it allows you to create lines with varable widths. It is a fork of Jaume Sanchez Elias [THREE.meshline](https://github.com/spite/THREE.MeshLine) as the repo no longer appears to be maintained.\n\n- Supports BufferGeometry\n- Extends `THREE.BufferGeometry` and can be used in regular meshes as a geometry\n- New `setVertices` and `setBufferArray` functions so you no longer need to create a geometry prior to a `MeshLine`\n- Raycast is exposed as `MeshLineRaycast` and can be used like `mesh.raycast = MeshLineRaycast`\n- Raycast accounts for line width\n- Extra setters and getters to help with declaritive libraries like [react-three-fiber](https://github.com/react-spring/react-three-fiber)\n\n# How to use\n\n#### Fetch imports\n\n```js\nimport { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'threejs-meshline'\n```\n\n#### Create and populate a geometry\n\nFirst, create the list of vertices that will define the line. `MeshLine` accepts an array of vertices.\n\n```js\nconst vertices = []\nfor (let j = 0; j < Math.PI; j += (2 * Math.PI) / 100)\n vertices.push(new THREE.Vector3(Math.cos(j), Math.sin(j), 0))\n```\n\n#### Create a MeshLine and set the vertices\n\nOnce you have that, you can create a new `MeshLine`, and call `.setVertices()` passing the vertices.\n\n```js\nconst line = new MeshLine()\nline.setVertices(vertices)\n```\n\nNote: `.setVertices` accepts a second parameter, which is a function to define the width in each point along the line. By default that value is 1, making the line width 1 \\* lineWidth in the material.\n\n```js\n// p is a decimal percentage of the number of points\n// ie. point 200 of 250 points, p = 0.8\nline.setVertices(geometry, p => 2) // makes width 2 * lineWidth\nline.setVertices(geometry, p => 1 - p) // makes width taper\nline.setVertices(geometry, p => 2 + Math.sin(50 * p)) // makes width sinusoidal\n```\n\n#### Create a MeshLineMaterial\n\nA `MeshLine` needs a `MeshLineMaterial`:\n\n```js\nconst material = new MeshLineMaterial(OPTIONS)\n```\n\nBy default it's a white material of width 1 unit.\n\n`MeshLineMaterial` has several attributes to control the appereance of the `MeshLine`:\n\n- `map` - a `THREE.Texture` to paint along the line (requires `useMap` set to true)\n- `useMap` - tells the material to use `map` (0 - solid color, 1 use texture)\n- `alphaMap` - a `THREE.Texture` to use as alpha along the line (requires `useAlphaMap` set to true)\n- `useAlphaMap` - tells the material to use `alphaMap` (0 - no alpha, 1 modulate alpha)\n- `repeat` - THREE.Vector2 to define the texture tiling (applies to map and alphaMap - MIGHT CHANGE IN THE FUTURE)\n- `color` - `THREE.Color` to paint the line width, or tint the texture with\n- `opacity` - alpha value from 0 to 1 (requires `transparent` set to `true`)\n- `alphaTest` - cutoff value from 0 to 1\n- `dashArray` - the length and space between dashes. (0 - no dash)\n- `dashOffset` - defines the location where the dash will begin. Ideal to animate the line.\n- `dashRatio` - defines the ratio between that is visible or not (0 - more visible, 1 - more invisible).\n- `resolution` - `THREE.Vector2` specifying the canvas size (REQUIRED)\n- `sizeAttenuation` - makes the line width constant regardless distance (1 unit is 1px on screen) (0 - attenuate, 1 - don't attenuate)\n- `lineWidth` - float defining width (if `sizeAttenuation` is true, it's world units; else is screen pixels)\n- `near` - camera near clip plane distance (REQUIRED if `sizeAttenuation` set to false)\n- `far` - camera far clip plane distance (REQUIRED if `sizeAttenuation` set to false)\n\nIf you're rendering transparent lines or using a texture with alpha map, you should set `depthTest` to `false`, `transparent` to `true` and `blending` to an appropriate blending mode, or use `alphaTest`.\n\n#### Use MeshLine and MeshLineMaterial to create a THREE.Mesh\n\nFinally, we create a mesh and add it to the scene:\n\n```js\nconst mesh = new THREE.Mesh(line, material)\nscene.add(mesh)\n```\n\nYou can optionally add raycast support with the following.\n\n```js\nmesh.raycast = MeshLineRaycast\n```\n\n# Declarative use\n\nthreejs-meshline has getters and setters that make declarative usage a little easier. This is how it would look like in react/[react-three-fiber](https://github.com/drcmda/react-three-fiber). You can try it live [here](https://codesandbox.io/s/react-three-fiber-threejs-meshline-example-vl221).\n\n```jsx\nimport { extend, Canvas } from 'react-three-fiber'\nimport { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'threejs-meshline'\n\nextend({ MeshLine, MeshLineMaterial })\n\nfunction Line({ vertices, width, color }) {\n return (\n \n \n \n \n \n \n )\n}\n```\n","readmeFilename":"README.md"}