ivalentin
/
ObJS


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=windows-1252" http-equiv="content-type"/>
		<title>ObJS</title>
		<!-- Script file -->
		<script type="text/javascript" src="script/ObJS.js"></script>
	</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 id="ObJSControl">
					Choose a model:
					<select id="objSelector" onChange="objs.load(this.value)">
						<option value="obj/rainbow.obj" selected="selected">Rainbow</option>
						<option value="obj/cube.obj">Cube</option>
						<option value="obj/sphere.obj">Sphere</option>
						<option value="obj/star.obj">Star</option>
						<option value="obj/monkey.obj">Monkey</option>
						<option value="obj/bolt.obj">Bolt</option>
						<option value="obj/multiple.obj">Multiple Objects</option>
						<option value="obj/seaplane.obj">Seaplane</option>
					</select>
					<br/><br/><br/>
					<input type="checkbox" value="backg" checked onChange="objs.drawBackground(this.checked);"/>Background
					<input type="color" value="#C8C8C8" onChange="objs.setBackgroundColor(this.value)"/>
					<br/>
					<input type="checkbox"  value="verts" checked onChange="objs.drawVertizes(this.checked);"/>Vertices
					<input type="color"  value="#0A0A0A" onChange="objs.setVertizesColor(this.value);"/>
					<br/>
					<input type="checkbox" value="edges" checked onChange="objs.drawEdges(this.checked);"/>Edges
					<input type="color" value="#644646" onChange="objs.setEdgesColor(this.value);"/>
					<br/>
					<input type="checkbox" value="faces" checked onChange="objs.drawFaces(this.checked);"/>Faces
					<input type="color" value="#B4B4FF" onChange="objs.setFacesColor(this.value);"/>
					<input type="checkbox" checked onChange="objs.linkMaterial(this.checked);"/>Use materials
					<br/><br/>
					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%
					<br/><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/><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%
					<br/><br/>
					Movement speed:<br/>
					0% <input type="range" min="0" max="10" step="1" value="5" onInput="objs.setMovementSpeed(this.value);" onChange="objs.setMovementSpeed(this.value);"/>100%
				</td>
			</tr>
		</table>
	</body>
</html>