To create a correct SVG file you should use an SVG editor software (I used Inkscape). The SVG file should have the following properties:
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.
Include headers.
<script type="text/javascript" src="three.min.js"></script> <script type="text/javascript" src="jsmodeler.js"></script> <script type="text/javascript" src="jsmodeler.viewer.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 ();
Here is the result: