SVG To 3D Tutorial

Live demo

Here is the result of this tutorial

Create a correct SVG file

To create a correct SVG file you should use an SVG editor software (I used Inkscape). The SVG file should have the following properties:

• It can contain only path, rect and polygon tags. Other tags will be skipped. With Inkscape you can convert anything to path.
• If a path lies inside an another path, make a hole from it. You can create this with Inkscape. Do not use a lot of holes in a path.

Place the SVG somewhere in your page

The conversion currently works only with inline SVG objects. If you would like to hide it, set its position to absolute, and offset it outside of the screen. Do not use css hidden attribute.

Create the 3D model

Include headers. Unfortunately Chrome removed SvgPathSegList API, so you have to include this polyfill if you would like to make it work in Chrome: https://github.com/progers/pathseg.

<script type="text/javascript" src="pathseg.js"></script>
<script type="text/javascript" src="jsmodeler.js"></script>
<script type="text/javascript" src="jsmodeler.ext.svgtomodel.js"></script>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="jsmodeler.ext.three.js"></script>

Add an id to your SVG object.

<svg id="svgid" ...

Place a canvas where you would like to show your model.

<canvas id="svgcanvas" width="300" height="300"></canvas>

Add this code to window.onload event:

var viewerSettings = {
	cameraEyePosition : [-3, -2, 1.0],
	cameraCenterPosition : [0.0, 0.0, 0.0],
	cameraUpVector : [0.0, 0.0, 1.0],
	nearClippingPlane : 1.0,
	farClippingPlane : 100000.0
};

var viewer = new JSM.ThreeViewer ();
if (!viewer.Start (document.getElementById ('svgcanvas'), viewerSettings)) {
	viewer = null;
	return;
}

var svgObject = document.getElementById ('svgid');
var modelAndMaterials = JSM.SvgToModel (svgObject, 8, 5);
var model = modelAndMaterials[0];
var materials = modelAndMaterials[1];
var meshes = JSM.ConvertModelToThreeMeshes (model, materials);
viewer.AddMeshes (meshes);

viewer.FitInWindow ();
viewer.Draw ();