ホーム エクスプローラ ヘルプ
サインイン
ivalentin
/
ObJS
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

Options to draw elements

Iñigo Valentin 12 年 前
親
a4b924f7b8
コミット
8e0a67d2ba
2 ファイル変更、58 行追加、19 行削除
分割表示 差分情報を表示
  1. 24 11
      index.html
  2. 34 8
      script/ObJS.js

+ 24 - 11
index.html
ファイルの表示 

@@ -7,16 +7,29 @@
 
 		<script type="text/javascript" src="script/ObJS.js"></script>
 
 		<!-- CSS files -->
 
 	</head>
 
-	<body>
 
-		<select id="objSelector" name="objSelector" onChange="loadModel(this)">
 
-			<option value="cube" selected="selected">Cube</option>
 
-			<option value="2cube">Two Cubes</option>
 
-			<option value="complex">Complex Object</option>
 
-			<option value="2complex">Two Complex Objects</option>
 
-		</select>
 
-		<br/>
 
-		<canvas id="ObJSCanvas" width="400" height="400">
 
-			Your browser does not support the HTML5 canvas tag.
 
-		</canvas>
 
+	<body onload="loadModel(document.getElementById('objSelector'));">
 
+		<table>
 
+			<tr>
 
+				<td>
 
+					<canvas id="ObJSCanvas" width="400" height="400">
 
+						Your browser does not support the HTML5 canvas tag.
 
+					</canvas>
 
+				</td>
 
+				<td>
 
+					<select id="objSelector" name="objSelector" onChange="loadModel(this)">
 
+						<option value="cube" selected="selected">Cube</option>
 
+						<option value="2cube">Two Cubes</option>
 
+						<option value="complex">Complex Object</option>
 
+						<option value="2complex">Two Complex Objects</option>
 
+					</select>
 
+					<br/>
 
+					<input type="checkbox" name="drawElement" value="verts" checked onChange="drawElement('verts', this.checked);">Vertices
 
+					<br/>
 
+					<input type="checkbox" name="drawElement" value="edges" checked onChange="drawElement('edges', this.checked);">Edges
 
+					<br/>
 
+					<input type="checkbox" name="drawElement" value="faces" checked onChange="drawElement('faces', this.checked);">Faces
 
+				</td>
 
+			</tr>
 
+		</table>
 
 	</body>
 
 </html>

+ 34 - 8
script/ObJS.js
ファイルの表示 

@@ -15,9 +15,29 @@ var obj;
 
 var vert;
 
 var face;
 
 
+var dVerts = true;
 
+var dEdges = true;
 
+var dFaces = true;
 
+
 
+
 
 var pX = null;
 
 var pY = null;
 
 
+function drawElement(name, value){
 
+	switch (name){
 
+		case "verts":
 
+			dVerts = value;
 
+			break;
 
+		case "edges":
 
+			dEdges = value;
 
+			break;
 
+		case "faces":
 
+			dFaces = value;
 
+			break;
 
+	}
 
+	draw();
 
+}
 
+
 
 function loadModel(val){
 
 	//Get file
 
 	xmlhttp = new XMLHttpRequest();
 
@@ -27,9 +47,7 @@ function loadModel(val){
 
 	initArrays();
 
 	readVerts(fileContent);
 
 	readFaces(fileContent);
 
-	initCanvas();
 
-	drawFaces();
 
-	drawVerts();
 
+	draw();
 
 	writeCredits();
 
 }
 
 
@@ -102,14 +120,24 @@ function drawFaces(){
 
 		ctx.moveTo(vert[face[i][0]][0], vert[face[i][0]][1]);
 
 		for (var j = 1; j < face[i].length; j++) {
 
 			ctx.lineTo(vert[face[i][j]][0], vert[face[i][j]][1]);
 
-			ctx.stroke();
 
+			if(dEdges)
 
+				ctx.stroke();
 
+				
 		}
 
 		ctx.closePath();
 
 		ctx.fillStyle = faceColor;
 
-		ctx.fill();
 
+		if(dFaces)
 
+			ctx.fill();
 
 	}
 
 }
 
 
+function draw(){
 
+	initCanvas();
 
+	drawFaces();
 
+	if (dVerts)
 
+		drawVerts();
 
+}
 
+
 
 function rotateY(theta) {
 
 	var sin_t = Math.sin(theta / 100);
 
 	var cos_t = Math.cos(theta / 100);
 
@@ -168,9 +196,7 @@ function initCanvas(){
 
 			pX = x;
 
 			pY = y;
 
 			
-			initCanvas();
 
-			drawFaces();
 
-			drawVerts();
 
+			draw();
 
 			return false;
 
 		}
 
 	}