documentation/examples/clock.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>
	<script type="text/javascript" src="../../build/jsmodeler.js"></script>
	<script type="text/javascript" src="../../build/jsmodeler.ext.three.js"></script>
	<script type="text/javascript" src="clockgenerator.js"></script>
	<title>JSModeler Clock Example</title>

	<style>
		html, body
		{
			margin : 0px;
			padding : 0px;
			width : 100%;
			height : 100%;
		}
		
		canvas
		{
			display : block;
		}
	</style>
	
	<script type="text/javascript">
		var viewer = null;
		var fixTime = false;
		
		function Update ()
		{
			var time = new Date ();

			var currentHours = time.getHours () % 12;
			var currentMinutes = time.getMinutes ();
			var currentSeconds = time.getSeconds ();
			var currentMilliseconds = time.getMilliseconds ();
			if (fixTime) {
				var currentHours = 1 % 12;
				var currentMinutes = 42;
				var currentSeconds = 27;
				var currentMilliseconds = 0;
			}
			
			var currentHoursInMinutes = currentHours * 60 + currentMinutes;
			var currentMinutesInSeconds = currentMinutes * 60 + currentSeconds;
			var currentSecondsInMilliseconds = currentSeconds * 1000 + currentMilliseconds;
			
			var hourAngle = currentHoursInMinutes * 360 / 720;
			var minuteAngle = currentMinutesInSeconds * 360 / 3600;
			var secondAngle = currentSecondsInMilliseconds * 360 / 60000;
			viewer.GetMesh (15).rotation.z = -hourAngle * JSM.DegRad;
			viewer.GetMesh (16).rotation.z = -minuteAngle * JSM.DegRad;
			viewer.GetMesh (17).rotation.z = -secondAngle * JSM.DegRad;

			viewer.Draw ();
			requestAnimationFrame (Update);
		};

		function Resize ()
		{
			var margin = 10;
			var canvas = document.getElementById ('example');
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		}

		function Load ()
		{
			var TextureLoaded = function () {
				viewer.Draw ();
			};

			var viewerSettings = {
				cameraEyePosition : [2.0, 2.0, 2.0],
				cameraCenterPosition : [0.0, 0.0, 0.0],
				cameraUpVector : [1, 0, 0]
			};

			window.onresize = Resize;
			Resize ();

			viewer = new JSM.ThreeViewer ();
			viewer.Start (document.getElementById ('example'), viewerSettings);
			
			var model = JSM.GenerateClock (1.0, 100);
			
			var conversionData = {
				textureLoadedCallback : null,
				hasConvexPolygons : true
			};
			var meshes = JSM.ConvertModelToThreeMeshes (model, conversionData);

			for (var i = 0; i < meshes.length; i++) {
				viewer.AddMesh (meshes[i]);
			}

			var hash = window.location.hash.substr (1);
			if (hash == 'fixtime') {
				fixTime = true;
			}			
			
			Update ();
		};
	
	    window.onload = function ()
		{
			Load ();			
		};
	</script>

</head>

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

</html>