{"id":13547572,"url":"https://github.com/spite/THREE.MeshLine","last_synced_at":"2025-04-02T20:30:27.774Z","repository":{"id":41148690,"uuid":"46591861","full_name":"spite/THREE.MeshLine","owner":"spite","description":"Mesh replacement for THREE.Line","archived":false,"fork":false,"pushed_at":"2024-03-22T08:31:48.000Z","size":6673,"stargazers_count":2234,"open_issues_count":77,"forks_count":379,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-03-30T14:01:48.632Z","etag":null,"topics":["glsl","line","shader","threejs","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-20T23:12:16.000Z","updated_at":"2025-03-24T00:22:42.000Z","dependencies_parsed_at":"2024-06-18T12:17:11.082Z","dependency_job_id":"d33df717-4e10-44d8-a0a3-ba0e4837a446","html_url":"https://github.com/spite/THREE.MeshLine","commit_stats":{"total_commits":170,"total_committers":20,"mean_commits":8.5,"dds":0.5411764705882354,"last_synced_commit":"b49ae600898a88bdb3486a3674d5887ca1b61ff6"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.MeshLine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.MeshLine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.MeshLine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.MeshLine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spite","download_url":"https://codeload.github.com/spite/THREE.MeshLine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246527287,"owners_count":20792044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["glsl","line","shader","threejs","webgl"],"created_at":"2024-08-01T12:00:58.173Z","updated_at":"2025-04-02T20:30:25.503Z","avatar_url":"https://github.com/spite.png","language":"JavaScript","readme":"# MeshLine\nMesh replacement for ```THREE.Line```\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\u003cscript src=\"THREE.MeshLine.js\"\u003e\u003c/script\u003e\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 \u003c 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 ```BufferGeometry``` looking up the vertices in it.\n\n```js\nconst points = [];\nfor (let j = 0; j \u003c Math.PI; j += 2 * Math.PI / 100) {\n  points.push(new THREE.Vector3(Math.cos(j), Math.sin(j), 0));\n}\nconst geometry = new THREE.BufferGeometry().setFromPoints(points);\nconst line = new MeshLine();\nline.setGeometry(geometry);\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 =\u003e 2); // makes width 2 * lineWidth\nline.setPoints(geometry, p =\u003e 1 - p); // makes width taper\nline.setPoints(geometry, p =\u003e 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\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://codesandbox.io/s/react-three-fiber-threejs-meshline-example-vl221\"\u003e\u003cimg width=\"432\" height=\"240\" src=\"https://imgur.com/mZikTAH.gif\" /\u003e\u003c/a\u003e\n\t\u003ca href=\"https://codesandbox.io/s/threejs-meshline-custom-spring-3-ypkxx\"\u003e\u003cimg width=\"432\" height=\"240\" src=\"https://imgur.com/g8ts0vJ.gif\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n```jsx\nimport { extend, Canvas } from 'react-three-fiber'\nimport { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline'\n\nextend({ MeshLine, MeshLineMaterial })\n\nfunction Line({ points, width, color }) {\n  return (\n    \u003cCanvas\u003e\n      \u003cmesh raycast={MeshLineRaycast}\u003e\n        \u003cmeshLine attach=\"geometry\" points={points} /\u003e\n        \u003cmeshLineMaterial\n          attach=\"material\"\n          transparent\n          depthTest={false}\n          lineWidth={width}\n          color={color}\n          dashArray={0.05}\n          dashRatio={0.95}\n        /\u003e\n      \u003c/mesh\u003e\n    \u003c/Canvas\u003e\n  )\n}\n```\n\nDynamic line widths can be set along each point using the `widthCallback` prop.\n```jsx\n\u003cmeshLine attach='geometry' points={points} widthCallback={pointWidth =\u003e pointWidth * Math.random()} /\u003e\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","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2FTHREE.MeshLine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspite%2FTHREE.MeshLine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2FTHREE.MeshLine/lists"}