ivalentin
/
ObJS


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=windows-1252" http-equiv="content-type"/>
		<title>ObJS</title>
		<!--Script files -->
		<script type="text/javascript" src="script/ObJS.js"></script>
		<!-- CSS files -->
	</head>
	<body onload="objs = new ObJS(); objs.initCanvas();objs.load(document.getElementById('objSelector').value);">
		<table>
			<tr>
				<td>
					<canvas id="ObJSCanvas" width="500" height="500">
						Your browser does not support the HTML5 canvas tag.
					</canvas>
				</td>
				<td>
					Choose a model:
					<select id="objSelector" name="objSelector" onChange="objs.load(this.value)">
						<option value="obj/cube.obj" selected="selected">Cube</option>
						<option value="obj/sphere.obj">Sphere</option>
						<option value="obj/monkey.obj">Monkey</option>
						<option value="obj/bolt.obj">Bolt</option>
						<option value="obj/multiple.obj">Multiple Objects</option>
					</select>
					<br/><br/><br/>
					<pre><input type="checkbox" name="drawElement" value="backg" checked onChange="objs.drawElement('backg', this.checked);"/>Background	<input type="color" id="colorBackg" value="#C8C8C8" onChange="objs.colorElement('backg', this.value);"/></pre>
					<br/>
					<pre><input type="checkbox" name="drawElement" value="verts" checked onChange="objs.drawElement('verts', this.checked);"/>Vertices	<input type="color" id="colorVerts" value="#0A0A0A" onChange="objs.colorElement('verts', this.value);"/></pre>
					<br/>
					<pre><input type="checkbox" name="drawElement" value="edges" checked onChange="objs.drawElement('edges', this.checked);"/>Edges		<input type="color" id="colorEdges" value="#644646" onChange="objs.colorElement('edges', this.value);"/></pre>
					<br/>
					<pre><input type="checkbox" name="drawElement" value="faces" checked onChange="objs.drawElement('faces', this.checked);"/>Faces		<input type="color" id="colorFaces" value="#B4B4FF" onChange="objs.colorElement('faces', this.value);"/></pre>
					<pre>		Alpha:<br/>		0% <input type="range" min="0" max="100" step="1" value="60" onInput="objs.setAlpha(this.value);" onChange="objs.setAlpha(this.value);"/>100%</pre>
					<br/>
					Rotation speed:<br/>
					0% <input type="range" min="0" max="10" step="1" value="3" onInput="objs.setRotationSpeed(this.value);" onChange="objs.setRotationSpeed(this.value);"/>100%
					<br/>Zoom speed:<br/>
					0% <input type="range" min="0" max="10" step="1" value="2" onInput="objs.setZoomSpeed(this.value);" onChange="objs.setZoomSpeed(this.value);"/>100%
				</td>
			</tr>
		</table>
	</body>
</html>