🚀 converts a SVG path to a 3D mesh
JavaScript HTML GLSL
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo documentation, use wireframe every other mesh Oct 4, 2015
.gitignore gitignore svgs Oct 3, 2015
.npmignore bam! Oct 3, 2015
LICENSE.md bam! Oct 3, 2015
README.md allow normalization to be disabled Jun 20, 2016
index.html spacing Oct 4, 2015
index.js allow normalization to be disabled Jun 20, 2016
package.json 1.1.0 Jun 20, 2016

README.md

svg-mesh-3d

stable

[

](http://mattdesl.github.io/svg-mesh-3d/)

(ThreeJS demo) - (source)

A high-level module to convert a SVG <path> string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs.

Built on top of cdt2d by @mikolalysenko, and various other modules.

Install

npm install svg-mesh-3d --save

Example

Here is an example using a simple path:

var svgMesh3d = require('svg-mesh-3d')

var path = 'M305.214,374.779c2.463,0,3.45,0.493...'
var mesh = svgMesh3d(path)

The returned mesh is a 3D indexed "simplicial complex" that can be used in ThreeJS, StackGL, etc. It uses arrays for vectors and follows the format:

{
  positions: [ [x1, y1, z1], [x2, y2, z2], ... ],
  cells: [ [a, b, c], [d, e, f] ]
}

Or, to load a mesh in the browser from an SVG file:

var loadSvg = require('load-svg')
var parsePath = require('extract-svg-path').parse
var svgMesh3d = require('svg-mesh-3d')

loadSvg('svg/logo.svg', function (err, svg) {
  if (err) throw err

  var svgPath = parsePath(svg)
  var mesh = svgMesh3d(svgPath, {
    delaunay: false,
    scale: 4
  })
})

Demos

Source:

To run the demos from source:

git clone https://github.com/mattdesl/svg-mesh-3d.git
cd svg-mesh-3d

# install dependencies
npm install

# ThreeJS demo
npm run start

# Canvas2D demo
npm run 2d

Usage

mesh = svgMesh3d(svgPath, [opt])

Triangulates the svgPath string into a 3D simplicial complex. The positions in the 3D mesh are normalized to a -1.0 ... 1.0 range.

Options:

  • delaunay (default true)
    • whether to use Delaunay triangulation
    • Delaunay triangulation is slower, but looks better
  • clean (default true)
    • whether to run the mesh through clean-pslg
    • slower, but often needed for correct triangulation
  • simplify (default 0)
    • a number, the distance threshold for simplication before triangulation (in pixel space)
    • higher number can produce faster triangulation
  • scale (default 1)
    • a positive number, the scale at which to approximate the curves from the SVG paths
    • higher number leads to smoother corners, but slower triangulation
  • normalize (default true) a boolean, whether to normalize the positions to -1 .. 1
  • randomization (default 0)
    • a positive number, the amount of extra points to randomly add within the bounding box before triangulation
    • higher number can lead to a nicer aesthetic, but slower triangulation

Other options are passed to cdt2d, such as exterior (default false) and interior (default true).

See Also

License

MIT, see LICENSE.md for details.