{"_id":"@dvdslns/meshline","_rev":"1-5637d76ca53703b87fd0acbb2389ba36","name":"@dvdslns/meshline","dist-tags":{"latest":"2.0.4"},"versions":{"2.0.4":{"name":"@dvdslns/meshline","version":"2.0.4","author":{"name":"Jaume Sanchez","email":"the.spite@gmail.com","url":"https://www.clicktorelease.com"},"license":"MIT","bugs":{"url":"https://github.com/spite/THREE.MeshLine/issues"},"homepage":"https://github.com/spite/THREE.MeshLine#readme","scripts":{"dev":"vite","build":"tsc --declaration && vite build ","serve":"vite preview"},"peerDependencies":{"three":">=0.126.0"},"types":"./index.d.ts","main":"./dist/meshline.umd.js","module":"./dist/meshline.es.js","exports":{".":{"import":"./dist/meshline.es.js","require":"./dist/meshline.umd.js"}},"devDependencies":{"@types/three":"^0.137.0","typescript":"^4.3.2","vite":"^2.3.7"},"dependencies":{"three":"^0.137.0"},"gitHead":"983d13f8739a78557f14f9bddae227394d064562","description":"Mesh replacement for ```THREE.Line```","_id":"@dvdslns/meshline@2.0.4","_nodeVersion":"17.3.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-gwIi4ajuIT56dD0OYyuBW07yg0VMX5tQ+lmbTGZBOj3vjxug+PWMzFrQUspeJd7qhGkoMnrnoVAUqLndMawAjA==","shasum":"80dcb5ad6ec67ed9be82d55f947a7839847ae28a","tarball":"https://registry.npmjs.org/@dvdslns/meshline/-/meshline-2.0.4.tgz","fileCount":6,"unpackedSize":35905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9GsMCRA9TVsSAnZWagAAfiQP/RnNtQkWzzacOhZA3+1P\nqKgylAKfDnM2DNt+X7WHLBUj3YHMn6RVRgjoDdHBzUZmwZennvCKMaVlwt5u\nkwOzdWxLeuXrUj8pLDDEEmfST1NScvr1Ehv2JSDTzFH9MKjL3fDOLYWgKIAY\nJr0A2woXy6HsVJhrEykVCCK+f0+5AbqFNIgeMSn9brJ9SFuR+rTLiRgOsOOR\nyi0xYLgi3XNG5xb0J8xKKJLvHa/Ur+YD+auXnvVFdUJYsgNEKDduoJzl0920\n+e62YkK+SNMWdat5mIG4V7S3gpVa9XkEiPYnioNeEkId4pDiLJAuPzMxJpzq\nR/9tDgicz65e7VaB9j6Lfs6/DGHWRcbqC9KTNoqYzfceoqYP+gH07mCYP/R3\nF8YENbWJ0A/lhL7KELAwln6i9x99OKF9zZCOGvx3aym4panoWKlwzyYlF5LQ\nHJmfF4jH8XQ0x/GalLTXCGoKtcrtE4km/YcHYxTOUAN9wRgfK9OaxbXym6Vy\nOLAqeKPIv6joGpc003ZTCXNSUQ1aYN1QR/uoSj8pBrXJFwaeZeJ3hOpcb0na\nKgiTEaLwPrxRXE/1OniiC2d3PAfpf/0/AralIY1h7bqe9Nfw+GmSszNlq215\nnyq3qNpFTzREzTYcCQbgFvaszd2edCyP8R/Kygmjf10dujFJHGPa6UzaTd7r\nJlnc\r\n=JmAL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgg59C/KkzFzAO4n4YnM0V3c0lmtfk4Fb9TXp2E7SCYQIgIH51mAyPNJfS8fSUlbY5jdf/TNBHSaz3luFpk9+Sfc8="}]},"_npmUser":{"name":"dvdslns","email":"messthetic@gmail.com"},"directories":{},"maintainers":[{"name":"dvdslns","email":"messthetic@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/meshline_2.0.4_1643408140489_0.7705043899494006"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-28T22:15:40.351Z","2.0.4":"2022-01-28T22:15:40.619Z","modified":"2022-04-05T06:10:06.222Z"},"maintainers":[{"name":"dvdslns","email":"messthetic@gmail.com"}],"description":"Mesh replacement for ```THREE.Line```","homepage":"https://github.com/spite/THREE.MeshLine#readme","author":{"name":"Jaume Sanchez","email":"the.spite@gmail.com","url":"https://www.clicktorelease.com"},"bugs":{"url":"https://github.com/spite/THREE.MeshLine/issues"},"license":"MIT","readme":"# MeshLine\nMesh replacement for ```THREE.Line```\n\ntemporary package:\n```js\nimport * as THREE from 'three';\nimport { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'meshline';\n```\n\nInstead of using GL_LINE, it uses a strip of triangles billboarded. Some examples:\n\n[![Demo](screenshots/demo.jpg)](http://spite.github.io/THREE.MeshLine/demo/index.html)\n[![Graph](screenshots/graph.jpg)](http://spite.github.io/THREE.MeshLine/demo/graph.html)\n[![Spinner](screenshots/spinner.jpg)](http://spite.github.io/THREE.MeshLine/demo/spinner.html)\n[![SVG](screenshots/svg.jpg)](http://spite.github.io/THREE.MeshLine/demo/svg.html)\n[![Shape](screenshots/shape.jpg)](http://spite.github.io/THREE.MeshLine/demo/shape.html)\n[![Shape](screenshots/birds.jpg)](http://spite.github.io/THREE.MeshLine/demo/birds.html)\n\n* [Demo](http://spite.github.io/THREE.MeshLine/demo/index.html): play with the different settings of materials\n* [Graph](http://spite.github.io/THREE.MeshLine/demo/graph.html): example of using ```MeshLine``` to plot graphs\n* [Spinner](http://spite.github.io/THREE.MeshLine/demo/spinner.html): example of dynamic ```MeshLine``` with texture\n* [SVG](http://spite.github.io/THREE.MeshLine/demo/svg.html): example of ```MeshLine``` rendering SVG Paths\n* [Shape](http://spite.github.io/THREE.MeshLine/demo/shape.html): example of ```MeshLine``` created from a mesh\n* [Birds](http://spite.github.io/THREE.MeshLine/demo/birds.html): example of ```MeshLine.advance()``` by @caramelcode (Jared Sprague) and @mwcz (Michael Clayton)\n\n### How to use ####\n\n* Include script\n* Create an array of 3D coordinates\n* Create a MeshLine and assign the points\n* Create a MeshLineMaterial\n* Use MeshLine and MeshLineMaterial to create a THREE.Mesh\n\n#### Include the script ####\n\nInclude script after THREE is included\n```js\n\n```\nor use npm to install it\n```\nnpm i three.meshline\n```\nand include it in your code (don't forget to require three.js)\n```js\nconst THREE = require('three');\nconst MeshLine = require('three.meshline').MeshLine;\nconst MeshLineMaterial = require('three.meshline').MeshLineMaterial;\nconst MeshLineRaycast = require('three.meshline').MeshLineRaycast;\n```\nor\n```js\nimport * as THREE from 'three';\nimport { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';\n```\n\n##### Create an array of 3D coordinates #####\n\nFirst, create the list of numbers that will define the 3D points for the line.\n\n```js\nconst points = [];\nfor (let j = 0; j < Math.PI; j += (2 * Math.PI) / 100) {\n points.push(Math.cos(j), Math.sin(j), 0);\n}\n```\n\n```MeshLine``` also accepts a ```Geometry``` or ```BufferGeometry``` looking up the vertices in it.\n\n```js\nconst geometry = new THREE.Geometry();\nfor (let j = 0; j < Math.PI; j += 2 * Math.PI / 100) {\n\tconst v = new THREE.Vector3(Math.cos(j), Math.sin(j), 0);\n\tgeometry.vertices.push(v);\n}\n```\n\n##### Create a MeshLine and assign the points #####\n\nOnce you have that, you can create a new `MeshLine`, and call `.setPoints()` passing the list of points.\n\n```js\nconst line = new MeshLine();\nline.setPoints(points);\n```\n\nNote: `.setPoints` 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.setPoints(geometry, p => 2); // makes width 2 * lineWidth\nline.setPoints(geometry, p => 1 - p); // makes width taper\nline.setPoints(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\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\nTHREE.meshline can be used declaritively. This is how it would look like in [react-three-fiber](https://github.com/drcmda/react-three-fiber). You can try it live [here](https://codesandbox.io/s/react-three-fiber-three.meshline-example-vl221).\n\n

\n\t\n\t\n

\n\n```jsx\nimport { extend, Canvas } from 'react-three-fiber'\nimport { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'meshline'\n\nextend({ MeshLine, MeshLineMaterial })\n\nfunction Line({ points, width, color }) {\n return (\n \n \n \n \n \n \n )\n}\n```\n\nDynamic line widths can be set along each point using the `widthCallback` prop.\n```jsx\n pointWidth * Math.random()} />\n```\n\n### TODO ###\n\n* Better miters\n* Proper sizes\n\n### Support ###\n\nTested successfully on\n\n* Chrome OSX, Windows, Android\n* Firefox OSX, Windows, Anroid\n* Safari OSX, iOS\n* Internet Explorer 11 (SVG and Shape demo won't work because they use Promises)\n* Opera OSX, Windows\n\n### References ###\n\n* [Drawing lines is hard](http://mattdesl.svbtle.com/drawing-lines-is-hard)\n* [WebGL rendering of solid trails](http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/)\n* [Drawing Antialiased Lines with OpenGL](https://www.mapbox.com/blog/drawing-antialiased-lines/)\n\n#### License ####\n\nMIT licensed\n\nCopyright (C) 2015-2016 Jaume Sanchez Elias, http://www.clicktorelease.com\n","readmeFilename":"README.md"}