sandbox/camerapos.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 -->
	<title>Example</title>

	<script type="text/javascript">
		var viewer = null;
		var body1 = null;
		var body2 = null;
	
		function Load ()
		{
			var viewerSettings = {
				cameraEyePosition : [-2.0, -1.5, 1.0],
				cameraCenterPosition : [0.0, 0.0, 0.0],
				cameraUpVector : [0, 0, 1]
			};

			viewer = new JSM.ThreeViewer ();
			viewer.Start (document.getElementById ('example'), viewerSettings);
			
			var model = new JSM.Model ()
			model.AddMaterial (new JSM.Material ({ambient : 0x008ab8, diffuse : 0x008ab8}));
			model.AddMaterial (new JSM.Material ({ambient : 0x279b61, diffuse : 0x279b61}));			
			
			body1 = JSM.GenerateCuboid (1, 1, 1);
			body1.SetPolygonsMaterialIndex (0);
			body1.Transform (new JSM.TranslationTransformation (new JSM.Coord (-1.0, 0.0, 0.0)));
			model.AddBody (body1);

			body2 = JSM.GenerateCuboid (1, 1, 1);
			body2.SetPolygonsMaterialIndex (1);
			body2.Transform (new JSM.TranslationTransformation (new JSM.Coord (1.0, 0.0, 0.0)));
			model.AddBody (body2);

			viewer.AddMeshes (JSM.ConvertModelToThreeMeshes (model));
			viewer.FitInWindow ();
			viewer.Draw ();
		}
	
		function ViewTo (bodyNumber, keepCameraDirection)
		{
			var boundingSphere = null;
			if (bodyNumber == 1) {
				boundingSphere = body1.GetBoundingSphere ();
			} else if (bodyNumber == 2) {
				boundingSphere = body2.GetBoundingSphere ();
			}
			var center = boundingSphere.GetCenter ();
			if (!keepCameraDirection) {
				var eye = center.Clone ();
				eye.Add (new JSM.Coord (0.0, -1.0, 0.0));
				viewer.cameraMove.Set (
					eye,
					center,
					new JSM.Coord (0.0, 0.0, 1.0)
				);
			}
			viewer.navigation.FitInWindow (center, boundingSphere.GetRadius ());
			viewer.Draw ();
		}
	
	    window.onload = function ()
		{
			Load ();	
		}
	</script>

</head>

<body>
	<canvas id="example" width="800" height="500"></canvas>
	<div id="buttons">
		<button onclick="javascript:ViewTo (1, true)">zoom to blue box</button>
		<button onclick="javascript:ViewTo (1, false)">look to blue box from side</button>
		<button onclick="javascript:ViewTo (2, true)">zoom to green box</button>
		<button onclick="javascript:ViewTo (2, false)">look to green box from side</button>
	</div>
</body>

</html>