Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
meshline - npm Package Compare versions
Comparing version 2.0.4 to 3.0.0
| { | ||
| "name": "meshline", | ||
| "version": "2.0.4", | ||
| "version": "3.0.0", | ||
| "author": "Jaume Sanchez <the.spite@gmail.com> (https://www.clicktorelease.com)", | ||
@@ -12,22 +12,16 @@ "license": "MIT", | ||
| "dev": "vite", | ||
| "build": "tsc --declaration && vite build ", | ||
| "build": "vite build && cp ./src/index.d.ts ./dist", | ||
| "serve": "vite preview" | ||
| }, | ||
| "files": [ | ||
| "dist", "index.d.ts" | ||
| "dist" | ||
| ], | ||
| "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" | ||
| } | ||
| }, | ||
| "main": "./dist/index.js", | ||
| "module": "./dist/index.mjs", | ||
| "types": "./dist/index.d.ts", | ||
| "devDependencies": { | ||
| "@types/three": "^0.138.0", | ||
| "typescript": "^4.3.2", | ||
| "vite": "^2.3.7", | ||
| "three": "^0.138.0" | ||
| "@types/three": "^0.146.0", | ||
| "typescript": "^4.9.3", | ||
| "vite": "^3.2.5", | ||
| "three": "^0.147.0" | ||
| }, | ||
@@ -34,0 +28,0 @@ "peerDependencies": { |
208
README.md
| # MeshLine | ||
| Mesh replacement for ```THREE.Line``` | ||
| temporary package: | ||
| ```js | ||
| import * as THREE from 'three'; | ||
| import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'meshline'; | ||
| ``` | ||
| A mesh replacement for `THREE.Line`. Instead of using GL_LINE, it uses a strip of billboarded triangles. This is a fork of [spite/THREE.MeshLine](https://github.com/spite/THREE.MeshLine). | ||
| Instead of using GL_LINE, it uses a strip of triangles billboarded. Some examples: | ||
| <p align="center"> | ||
| <img width="32%" src="screenshots/demo.jpg" alt=""/> | ||
| <img width="32%" src="screenshots/graph.jpg" alt=""/> | ||
| <img width="32%" src="screenshots/spinner.jpg" alt=""/> | ||
| <img width="32%" src="screenshots/svg.jpg" alt=""/> | ||
| <img width="32%" src="screenshots/shape.jpg" alt=""/> | ||
| <img width="32%" src="screenshots/birds.jpg" alt=""/> | ||
| </p> | ||
| [](http://spite.github.io/THREE.MeshLine/demo/index.html) | ||
| [](http://spite.github.io/THREE.MeshLine/demo/graph.html) | ||
| [](http://spite.github.io/THREE.MeshLine/demo/spinner.html) | ||
| [](http://spite.github.io/THREE.MeshLine/demo/svg.html) | ||
| [](http://spite.github.io/THREE.MeshLine/demo/shape.html) | ||
| [](http://spite.github.io/THREE.MeshLine/demo/birds.html) | ||
| ### How to use | ||
| * [Demo](http://spite.github.io/THREE.MeshLine/demo/index.html): play with the different settings of materials | ||
| * [Graph](http://spite.github.io/THREE.MeshLine/demo/graph.html): example of using ```MeshLine``` to plot graphs | ||
| * [Spinner](http://spite.github.io/THREE.MeshLine/demo/spinner.html): example of dynamic ```MeshLine``` with texture | ||
| * [SVG](http://spite.github.io/THREE.MeshLine/demo/svg.html): example of ```MeshLine``` rendering SVG Paths | ||
| * [Shape](http://spite.github.io/THREE.MeshLine/demo/shape.html): example of ```MeshLine``` created from a mesh | ||
| * [Birds](http://spite.github.io/THREE.MeshLine/demo/birds.html): example of ```MeshLine.advance()``` by @caramelcode (Jared Sprague) and @mwcz (Michael Clayton) | ||
| ### How to use #### | ||
| * Include script | ||
| * Create an array of 3D coordinates | ||
| * Create a MeshLine and assign the points | ||
| * Create a MeshLineMaterial | ||
| * Use MeshLine and MeshLineMaterial to create a THREE.Mesh | ||
| #### Include the script #### | ||
| Include script after THREE is included | ||
| ```js | ||
| <script src="THREE.MeshLine.js"></script> | ||
| ``` | ||
| or use npm to install it | ||
| npm install meshline | ||
| ``` | ||
| npm i three.meshline | ||
| ```jsx | ||
| import * as THREE from 'three' | ||
| import { MeshLineGeometry, MeshLineMaterial } from 'meshline' | ||
| ``` | ||
| and include it in your code (don't forget to require three.js) | ||
| ```js | ||
| const THREE = require('three'); | ||
| const MeshLine = require('three.meshline').MeshLine; | ||
| const MeshLineMaterial = require('three.meshline').MeshLineMaterial; | ||
| const MeshLineRaycast = require('three.meshline').MeshLineRaycast; | ||
| ``` | ||
| or | ||
| ```js | ||
| import * as THREE from 'three'; | ||
| import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline'; | ||
| ``` | ||
| ##### Create an array of 3D coordinates ##### | ||
| ##### Create an array of 3D coordinates | ||
| First, create the list of numbers that will define the 3D points for the line. | ||
| ```js | ||
| const points = []; | ||
| ```jsx | ||
| const points = [] | ||
| for (let j = 0; j < Math.PI; j += (2 * Math.PI) / 100) { | ||
| points.push(Math.cos(j), Math.sin(j), 0); | ||
| points.push(Math.cos(j), Math.sin(j), 0) | ||
| } | ||
| ``` | ||
| ```MeshLine``` also accepts a ```Geometry``` or ```BufferGeometry``` looking up the vertices in it. | ||
| ##### Create a MeshLine and assign the points | ||
| ```js | ||
| const geometry = new THREE.Geometry(); | ||
| for (let j = 0; j < Math.PI; j += 2 * Math.PI / 100) { | ||
| const v = new THREE.Vector3(Math.cos(j), Math.sin(j), 0); | ||
| geometry.vertices.push(v); | ||
| } | ||
| ``` | ||
| Once you have that, you can create a new `MeshLineGeometry`, and call `.setPoints()` passing the list of points. | ||
| ##### Create a MeshLine and assign the points ##### | ||
| Once you have that, you can create a new `MeshLine`, and call `.setPoints()` passing the list of points. | ||
| ```js | ||
| const line = new MeshLine(); | ||
| line.setPoints(points); | ||
| ```jsx | ||
| const geometry = new MeshLineGeometry() | ||
| geometry.setPoints(points) | ||
| ``` | ||
| Note: `.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. | ||
| Note: `.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. | ||
| ```js | ||
| ```jsx | ||
| // p is a decimal percentage of the number of points | ||
| // ie. point 200 of 250 points, p = 0.8 | ||
| line.setPoints(geometry, p => 2); // makes width 2 * lineWidth | ||
| line.setPoints(geometry, p => 1 - p); // makes width taper | ||
| line.setPoints(geometry, p => 2 + Math.sin(50 * p)); // makes width sinusoidal | ||
| geometry.setPoints(geometry, p => 2) // makes width 2 * lineWidth | ||
| geometry.setPoints(geometry, p => 1 - p) // makes width taper | ||
| geometry.setPoints(geometry, p => 2 + Math.sin(50 * p)) // makes width sinusoidal | ||
| ``` | ||
| ##### Create a MeshLineMaterial ##### | ||
| Cou can also provide a `BufferGeometry` by calling `.setGeometry()` instead. | ||
| A ```MeshLine``` needs a ```MeshLineMaterial```: | ||
| ```jsx | ||
| geometry.setGeometry(myGeometry) | ||
| ``` | ||
| ```js | ||
| const material = new MeshLineMaterial(OPTIONS); | ||
| ##### Create a MeshLineMaterial | ||
| `MeshLineGeometry` needs to be paired with `MeshLineMaterial`. | ||
| ```jsx | ||
| const material = new MeshLineMaterial(options) | ||
| ``` | ||
@@ -107,28 +71,28 @@ | ||
| ```MeshLineMaterial``` has several attributes to control the appereance of the ```MeshLine```: | ||
| `MeshLineMaterial` has several attributes to control the appereance of the `MeshLine`: | ||
| * ```map``` - a ```THREE.Texture``` to paint along the line (requires ```useMap``` set to true) | ||
| * ```useMap``` - tells the material to use ```map``` (0 - solid color, 1 use texture) | ||
| * ```alphaMap``` - a ```THREE.Texture``` to use as alpha along the line (requires ```useAlphaMap``` set to true) | ||
| * ```useAlphaMap``` - tells the material to use ```alphaMap``` (0 - no alpha, 1 modulate alpha) | ||
| * ```repeat``` - THREE.Vector2 to define the texture tiling (applies to map and alphaMap - MIGHT CHANGE IN THE FUTURE) | ||
| * ```color``` - ```THREE.Color``` to paint the line width, or tint the texture with | ||
| * ```opacity``` - alpha value from 0 to 1 (requires ```transparent``` set to ```true```) | ||
| * ```alphaTest``` - cutoff value from 0 to 1 | ||
| * ```dashArray``` - the length and space between dashes. (0 - no dash) | ||
| * ```dashOffset``` - defines the location where the dash will begin. Ideal to animate the line. | ||
| * ```dashRatio``` - defines the ratio between that is visible or not (0 - more visible, 1 - more invisible). | ||
| * ```resolution``` - ```THREE.Vector2``` specifying the canvas size (REQUIRED) | ||
| * ```sizeAttenuation``` - makes the line width constant regardless distance (1 unit is 1px on screen) (0 - attenuate, 1 - don't attenuate) | ||
| * ```lineWidth``` - float defining width (if ```sizeAttenuation``` is true, it's world units; else is screen pixels) | ||
| * `map` - a `THREE.Texture` to paint along the line (requires `useMap` set to true) | ||
| * `useMap` - tells the material to use `map` (0 - solid color, 1 use texture) | ||
| * `alphaMap` - a `THREE.Texture` to use as alpha along the line (requires `useAlphaMap` set to true) | ||
| * `useAlphaMap` - tells the material to use `alphaMap` (0 - no alpha, 1 modulate alpha) | ||
| * `repeat` - THREE.Vector2 to define the texture tiling (applies to map and alphaMap) | ||
| * `color` - `THREE.Color` to paint the line width, or tint the texture with | ||
| * `opacity` - alpha value from 0 to 1 (requires `transparent` set to `true`) | ||
| * `alphaTest` - cutoff value from 0 to 1 | ||
| * `dashArray` - the length and space between dashes. (0 - no dash) | ||
| * `dashOffset` - defines the location where the dash will begin. Ideal to animate the line. | ||
| * `dashRatio` - defines the ratio between that is visible or not (0 - more visible, 1 - more invisible). | ||
| * `resolution` - `THREE.Vector2` specifying the canvas size (REQUIRED) | ||
| * `sizeAttenuation` - constant lineWidth regardless of distance (1 is 1px on screen) (0 - attenuate, 1 - don't) | ||
| * `lineWidth` - float defining width (if `sizeAttenuation` is true, it's world units; else is screen pixels) | ||
| If 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```. | ||
| If 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`. | ||
| ##### Use MeshLine and MeshLineMaterial to create a THREE.Mesh ##### | ||
| ##### Use MeshLine and MeshLineMaterial to create a THREE.Mesh | ||
| Finally, we create a mesh and add it to the scene: | ||
| ```js | ||
| const mesh = new THREE.Mesh(line, material); | ||
| scene.add(mesh); | ||
| ```jsx | ||
| const mesh = new THREE.Mesh(geometry, material) | ||
| scene.add(mesh) | ||
| ``` | ||
@@ -138,28 +102,24 @@ | ||
| ```js | ||
| mesh.raycast = MeshLineRaycast; | ||
| ```jsx | ||
| import { raycast } from 'meshline' | ||
| mesh.raycast = raycast | ||
| ``` | ||
| ### Declarative use ### | ||
| ### Declarative use | ||
| THREE.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). | ||
| Meshline can be used declaritively. This is how it would look like in [react-three-fiber](https://github.com/pmndrs/react-three-fiber). You can try it live [here](https://codesandbox.io/s/react-three-fiber-three.meshline-example-vl221). | ||
| <p align="center"> | ||
| <a href="https://codesandbox.io/s/react-three-fiber-threejs-meshline-example-vl221"><img width="432" height="240" src="https://imgur.com/mZikTAH.gif" /></a> | ||
| <a href="https://codesandbox.io/s/threejs-meshline-custom-spring-3-ypkxx"><img width="432" height="240" src="https://imgur.com/g8ts0vJ.gif" /></a> | ||
| </p> | ||
| ```jsx | ||
| import { extend, Canvas } from 'react-three-fiber' | ||
| import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'meshline' | ||
| import { Canvas, extend } from '@react-three/fiber' | ||
| import { MeshLineGeometry, MeshLineMaterial, raycast } from 'meshline' | ||
| extend({ MeshLine, MeshLineMaterial }) | ||
| function Line({ points, width, color }) { | ||
| function Line({ points, width, color }) { | ||
| return ( | ||
| <Canvas> | ||
| <mesh raycast={MeshLineRaycast}> | ||
| <meshLine attach="geometry" points={points} /> | ||
| <meshLineMaterial | ||
| attach="material" | ||
| <mesh raycast={raycast}> | ||
| <meshLineGeometry points={points} /> | ||
| <meshLineMaterial | ||
| transparent | ||
@@ -179,31 +139,11 @@ depthTest={false} | ||
| Dynamic line widths can be set along each point using the `widthCallback` prop. | ||
| ```jsx | ||
| <meshLine attach='geometry' points={points} widthCallback={pointWidth => pointWidth * Math.random()} /> | ||
| <meshLineGeometry points={points} widthCallback={pointWidth => pointWidth * Math.random()} /> | ||
| ``` | ||
| ### TODO ### | ||
| ### References | ||
| * Better miters | ||
| * Proper sizes | ||
| ### Support ### | ||
| Tested successfully on | ||
| * Chrome OSX, Windows, Android | ||
| * Firefox OSX, Windows, Anroid | ||
| * Safari OSX, iOS | ||
| * Internet Explorer 11 (SVG and Shape demo won't work because they use Promises) | ||
| * Opera OSX, Windows | ||
| ### References ### | ||
| * [Drawing lines is hard](http://mattdesl.svbtle.com/drawing-lines-is-hard) | ||
| * [WebGL rendering of solid trails](http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/) | ||
| * [Drawing Antialiased Lines with OpenGL](https://www.mapbox.com/blog/drawing-antialiased-lines/) | ||
| #### License #### | ||
| MIT licensed | ||
| Copyright (C) 2015-2016 Jaume Sanchez Elias, http://www.clicktorelease.com |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by309.86%
582
Worsened metrics
- Total package byte prevSize
- decreased by-0.09%
35866
- Number of lines in readme file
- decreased by-28.99%
147
- Number of medium supply chain risk alerts
- increased by100%
2
No dependency changes