sandbox/pathbuilder.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="../build/lib/three.min.js"></script>
<!-- JSModeler includes start -->
	<script type="text/javascript" src="../src/core/jsm.js"></script>
	<script type="text/javascript" src="../src/core/timer.js"></script>
	<script type="text/javascript" src="../src/core/algorithm.js"></script>
	<script type="text/javascript" src="../src/core/async.js"></script>
	<script type="text/javascript" src="../src/core/check.js"></script>
	<script type="text/javascript" src="../src/core/jsonloader.js"></script>
	<script type="text/javascript" src="../src/geometry/definitions.js"></script>
	<script type="text/javascript" src="../src/geometry/coord2d.js"></script>
	<script type="text/javascript" src="../src/geometry/coord.js"></script>
	<script type="text/javascript" src="../src/geometry/determinant.js"></script>
	<script type="text/javascript" src="../src/geometry/coordutils.js"></script>
	<script type="text/javascript" src="../src/geometry/matrix.js"></script>
	<script type="text/javascript" src="../src/geometry/coordsystem.js"></script>
	<script type="text/javascript" src="../src/geometry/sector.js"></script>
	<script type="text/javascript" src="../src/geometry/line.js"></script>
	<script type="text/javascript" src="../src/geometry/box.js"></script>
	<script type="text/javascript" src="../src/geometry/sphere.js"></script>
	<script type="text/javascript" src="../src/geometry/transformation.js"></script>
	<script type="text/javascript" src="../src/geometry/plane.js"></script>
	<script type="text/javascript" src="../src/geometry/projection.js"></script>
	<script type="text/javascript" src="../src/geometry/convexhull.js"></script>
	<script type="text/javascript" src="../src/geometry/polygon2d.js"></script>
	<script type="text/javascript" src="../src/geometry/polygon.js"></script>
	<script type="text/javascript" src="../src/geometry/cutpolygon.js"></script>
	<script type="text/javascript" src="../src/geometry/triangulation.js"></script>
	<script type="text/javascript" src="../src/geometry/octree.js"></script>
	<script type="text/javascript" src="../src/geometry/bsptree.js"></script>
	<script type="text/javascript" src="../src/geometry/curves.js"></script>
	<script type="text/javascript" src="../src/geometry/utilities.js"></script>
	<script type="text/javascript" src="../src/geometry/ray.js"></script>
	<script type="text/javascript" src="../src/geometry/path.js"></script>
	<script type="text/javascript" src="../src/modeler/color.js"></script>
	<script type="text/javascript" src="../src/modeler/material.js"></script>
	<script type="text/javascript" src="../src/modeler/materialset.js"></script>
	<script type="text/javascript" src="../src/modeler/body.js"></script>
	<script type="text/javascript" src="../src/modeler/model.js"></script>
	<script type="text/javascript" src="../src/modeler/adjacencyinfo.js"></script>
	<script type="text/javascript" src="../src/modeler/bodyutils.js"></script>
	<script type="text/javascript" src="../src/modeler/textureutils.js"></script>
	<script type="text/javascript" src="../src/modeler/cututils.js"></script>
	<script type="text/javascript" src="../src/modeler/generator.js"></script>
	<script type="text/javascript" src="../src/modeler/camera.js"></script>
	<script type="text/javascript" src="../src/modeler/explode.js"></script>
	<script type="text/javascript" src="../src/modeler/exporter.js"></script>
	<script type="text/javascript" src="../src/modeler/trianglebody.js"></script>
	<script type="text/javascript" src="../src/modeler/trianglemodel.js"></script>
	<script type="text/javascript" src="../src/modeler/converter.js"></script>
	<script type="text/javascript" src="../src/modeler/rayutils.js"></script>
	<script type="text/javascript" src="../src/import/binaryreader.js"></script>
	<script type="text/javascript" src="../src/import/importerutils.js"></script>
	<script type="text/javascript" src="../src/import/importer3ds.js"></script>
	<script type="text/javascript" src="../src/import/importerobj.js"></script>
	<script type="text/javascript" src="../src/import/importerstl.js"></script>
	<script type="text/javascript" src="../src/import/importeroff.js"></script>
	<script type="text/javascript" src="../src/import/importercommon.js"></script>
	<script type="text/javascript" src="../src/renderer/webglutils.js"></script>
	<script type="text/javascript" src="../src/renderer/renderlight.js"></script>
	<script type="text/javascript" src="../src/renderer/rendermaterial.js"></script>
	<script type="text/javascript" src="../src/renderer/rendermesh.js"></script>
	<script type="text/javascript" src="../src/renderer/renderbody.js"></script>
	<script type="text/javascript" src="../src/renderer/shaderprogram.js"></script>
	<script type="text/javascript" src="../src/renderer/renderer.js"></script>
	<script type="text/javascript" src="../src/renderer/pointcloudrenderer.js"></script>
	<script type="text/javascript" src="../src/renderer/renderconverter.js"></script>
	<script type="text/javascript" src="../src/viewer/mouse.js"></script>
	<script type="text/javascript" src="../src/viewer/touch.js"></script>
	<script type="text/javascript" src="../src/viewer/painter.js"></script>
	<script type="text/javascript" src="../src/viewer/drawing.js"></script>
	<script type="text/javascript" src="../src/viewer/navigation.js"></script>
	<script type="text/javascript" src="../src/viewer/softwareviewer.js"></script>
	<script type="text/javascript" src="../src/viewer/spriteviewer.js"></script>
	<script type="text/javascript" src="../src/viewer/viewer.js"></script>
	<script type="text/javascript" src="../src/viewer/pointcloudviewer.js"></script>
	<script type="text/javascript" src="../src/extras/solidgenerator.js"></script>
	<script type="text/javascript" src="../src/extras/extgenerator.js"></script>
	<script type="text/javascript" src="../src/extras/subdivision.js"></script>
	<script type="text/javascript" src="../src/extras/csg.js"></script>
	<script type="text/javascript" src="../src/extras/surfaces.js"></script>
	<script type="text/javascript" src="../src/extensions/svgtomodel/svgtomodel.js"></script>
	<script type="text/javascript" src="../src/extensions/textgenerator/textgenerator.js"></script>
	<script type="text/javascript" src="../src/extensions/threeviewer/threeconverter.js"></script>
	<script type="text/javascript" src="../src/extensions/threeviewer/threeviewer.js"></script>
<!-- JSModeler includes end -->
	<script type="text/javascript" src="utils/polygondrawer.js"></script>
	<title>Example</title>

	<script type="text/javascript">
		function GetCoordinateArrays (path)
		{
			var result = [];
			var polygons = path.GetPolygons ();
			var i, j, polygon, polygonArray, polygonVertex, resultArray;
			for (i = 0; i < polygons.length; i++) {
				polygon = polygons[i];
				polygonArray = polygon.ToArray ();
				resultArray = [];
				for (j = 0; j < polygonArray.length; j++) {
					polygonVertex = polygonArray[j];
					if (polygonVertex === null) {
						resultArray.push (null);
					} else {
						resultArray.push ([polygonVertex.x, polygonVertex.y]);
					}
				}
				result.push (resultArray);
			}
			return result;
		};		
		
		function Load ()
		{
			var polygonDrawer = new PolygonDrawer ();
			polygonDrawer.Init (document.body, 600, 600, 0.2);
			polygonDrawer.DrawCoordSystem ();
		
			var path = new JSM.Path2D ({
				segmentation : 10
			});

			path.MoveTo (650, 194);
			path.LineTo (650, 503);
			path.CubicBezierTo (368, 756, 650, 665, 564, 756);
			path.CubicBezierTo (101, 703, 285, 756, 192, 738);
			path.LineTo (143, 582);
			path.CubicBezierTo (338, 621, 217, 607, 288, 621);
			path.CubicBezierTo (475, 493, 432, 621, 475, 589);
			path.LineTo (475, 451);
			path.LineTo (383, 451);
			path.CubicBezierTo (49, 206, 169, 451, 49, 365);
			path.CubicBezierTo (286, -21, 49, 72, 139, -21);
			path.CubicBezierTo (506, 89, 374, -21, 454, 11);
			path.CubicBezierTo (668, -18, 535, 17, 588, -11);
			path.LineTo (706, 100);
			path.CubicBezierTo (650, 194, 669, 114, 650, 135);
			path.Close ();
			
			path.MoveTo (333, 108);
			path.CubicBezierTo (229, 219, 265, 108, 229, 149);
			path.CubicBezierTo (401, 347, 229, 306, 286, 347);
			path.LineTo (475, 347);
			path.LineTo (475, 199);
			path.CubicBezierTo (333, 108, 442, 140, 396, 108);
			path.Close ();

			var viewerSettings = {
				cameraEyePosition : [-2.0, -1.5, 1.0],
				cameraCenterPosition : [0.0, 0.0, 0.0],
				cameraUpVector : [0, 0, 1],
				farClippingPlane : 10000
			};

			var viewer = new JSM.ThreeViewer ();
			viewer.Start (document.getElementById ('example'), viewerSettings);
			
			
			var bodies = JSM.GeneratePrismsFromPath2D (path, 100, true, 160 * JSM.DegRad);
			var i, meshes;
			for (i = 0; i < bodies.length; i++) {
				meshes = JSM.ConvertBodyToThreeMeshes (bodies[i]);
				viewer.AddMeshes (meshes);
			}	
			viewer.FitInWindow ();

			viewer.Draw ();
			
			var coordArrays = GetCoordinateArrays (path);
			for (i = 0; i < coordArrays.length; i++) {
				polygonDrawer.DrawPolyline (coordArrays[i], '#ffffff', '#00cc00');
			}			
		}
	
	    window.onload = function ()
		{
			Load ();			
		}
	</script>

</head>

<body>
	<canvas id="example" width="800" height="500"></canvas>
</body>

</html>