Halaman utama Jelajahi Bantuan
Masuk
ivalentin
/
ObJS
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

Move the model around

Iñigo Valentin 12 tahun lalu
induk
a4f14743d8
melakukan
f89b573dcd
3 mengubah file dengan 99 tambahan dan 31 penghapusan
Unified View Tampilkan Statistik Diff
  1. 26 4
      README.md
  2. 22 12
      index.html
  3. 51 15
      script/ObJS.js

+ 26 - 4
README.md
Tampilan Berkas 

@@ -45,23 +45,39 @@ Note that the canvas is automatically cleared when a new object is loaded.
 
 
 
 ### Transformations ###
 
 ### Transformations ###
 
 
 
-The model can be rotated and zoomed in and out with the mouse, but it can also be done programmatically.
 
-
 
 ##### Rotate the object #####
 
 ##### Rotate the object #####
 
+
 
+You can rotate the object by dragging it with the mouse. Also, you can apply rotation programatically:
 
+
 
 ```javascript
 
 ```javascript
 
 myObJS.rotateX(-1); //Rotate along the X edge to the left
 
 myObJS.rotateX(-1); //Rotate along the X edge to the left
 
 myObJS.rotateX(1);  //Rotate along the X edge to the right
 
 myObJS.rotateX(1);  //Rotate along the X edge to the right
 
 myObJS.rotateY(-1); //Rotate along the Y edge to the left
 
 myObJS.rotateY(-1); //Rotate along the Y edge to the left
 
 myObJS.rotateY(1);  //Rotate along the Y edge to the right
 
 myObJS.rotateY(1);  //Rotate along the Y edge to the right
 
 ```
 
 ```
 
-Note that the rotation speed can be set (see *Seting rotation speed*).
 
+Note that the rotation speed can be set (see *Set rotation speed*).
 
+
 
+##### Move the object #####
 
+
 
+You can move the object around by dragging it with the mouse while holding down the *shift* key. Also, you can move it programatically:
 
+
 
+```javascript
 
+myObJS.rotateX(-1); //Rotate along the X edge to the left
 
+myObJS.rotateX(1);  //Rotate along the X edge to the right
 
+myObJS.rotateY(-1); //Rotate along the Y edge to the left
 
+myObJS.rotateY(1);  //Rotate along the Y edge to the right
 
+```
 
+Note that the rotation speed can be set (see *Set movement speed*).
 
 
 
 ##### Zoom #####
 
 ##### Zoom #####
 
+
 
+Zoom in and out can be achieven with the mouse wheel, or programatically:
 
+
 
 ```javascript
 
 ```javascript
 
 myObJS.zoom("+"); //Zoom in
 
 myObJS.zoom("+"); //Zoom in
 
 myObJS.zoom("-"); //Zoom out
 
 myObJS.zoom("-"); //Zoom out
 
 ```
 
 ```
 
-Note that the zoom speed can be set (see *Seting zoom speed*).
 
+Note that the zoom speed can be set (see *Set zoom speed*).
 
 
 
 
 
 
 
@@ -121,6 +137,12 @@ myObJS.setRotationSpeed(value);
 
 ```
 
 ```
 
 * *value* is an integer, between 0 and 10. The greater it is, the greater the rotation speed.
 
 * *value* is an integer, between 0 and 10. The greater it is, the greater the rotation speed.
 
 
 
+##### Set movement speed #####
 
+```javascript
 
+myObJS.setMovementSpeed(value);
 
+```
 
+* *value* is an integer, between 0 and 10. The greater it is, the greater the movement speed.
 
+
 
 ##### Set zoom speed #####
 
 ##### Set zoom speed #####
 
 ```javascript
 
 ```javascript
 
 myObJS.setZoomSpeed(value);
 
 myObJS.setZoomSpeed(value);

+ 22 - 12
index.html
Tampilan Berkas 

@@ -3,9 +3,8 @@
 
 	<head>
 
 	<head>
 
 		<meta content="text/html; charset=windows-1252" http-equiv="content-type"/>
 
 		<meta content="text/html; charset=windows-1252" http-equiv="content-type"/>
 
 		<title>ObJS</title>
 
 		<title>ObJS</title>
 
-		<!--Script files -->
 
+		<!-- Script file -->
 
 		<script type="text/javascript" src="script/ObJS.js"></script>
 
 		<script type="text/javascript" src="script/ObJS.js"></script>
 
-		<!-- CSS files -->
 
 	</head>
 
 	</head>
 
 	<body onload="objs = new ObJS(); objs.initCanvas();objs.load(document.getElementById('objSelector').value);">
 
 	<body onload="objs = new ObJS(); objs.initCanvas();objs.load(document.getElementById('objSelector').value);">
 
 		<table>
 
 		<table>
 
@@ -15,9 +14,9 @@
 
 						Your browser does not support the HTML5 canvas tag.
 
 						Your browser does not support the HTML5 canvas tag.
 
 					</canvas>
 
 					</canvas>
 
 				</td>
 
 				</td>
 
-				<td>
 
+				<td id="ObJSControl">
 
 					Choose a model:
 
 					Choose a model:
 
-					<select id="objSelector" name="objSelector" onChange="objs.load(this.value)">
 
+					<select id="objSelector" onChange="objs.load(this.value)">
 
 						<option value="obj/rainbow.obj" selected="selected">Rainbow</option>
 
 						<option value="obj/rainbow.obj" selected="selected">Rainbow</option>
 
 						<option value="obj/cube.obj">Cube</option>
 
 						<option value="obj/cube.obj">Cube</option>
 
 						<option value="obj/sphere.obj">Sphere</option>
 
 						<option value="obj/sphere.obj">Sphere</option>
 
@@ -27,19 +26,30 @@
 
 						<option value="obj/seaplane.obj">Seaplane</option>
 
 						<option value="obj/seaplane.obj">Seaplane</option>
 
 					</select>
 
 					</select>
 
 					<br/><br/><br/>
 
 					<br/><br/><br/>
 
-					<pre><input type="checkbox" name="drawElement" value="backg" checked onChange="objs.drawBackground(this.checked);"/>Background	<input type="color" id="colorBackg" value="#C8C8C8" onChange="objs.setBackgroundColor(this.value)"/></pre>
 
-					<br/>
 
-					<pre><input type="checkbox" name="drawElement" value="verts" checked onChange="objs.drawVerts(this.checked);"/>Vertices	<input type="color" id="colorVerts" value="#0A0A0A" onChange="objs.setVertizesColor(this.value);"/></pre>
 
+					<input type="checkbox" value="backg" checked onChange="objs.drawBackground(this.checked);"/>Background
 
+					<input type="color" value="#C8C8C8" onChange="objs.setBackgroundColor(this.value)"/>
 
 					<br/>
 
 					<br/>
 
-					<pre><input type="checkbox" name="drawElement" value="edges" checked onChange="objs.drawEdges(this.checked);"/>Edges		<input type="color" id="colorEdges" value="#644646" onChange="objs.setEdgesColor(this.value);"/></pre>
 
+					<input type="checkbox"  value="verts" checked onChange="objs.drawVerts(this.checked);"/>Vertices
 
+					<input type="color"  value="#0A0A0A" onChange="objs.setVertizesColor(this.value);"/>
 
 					<br/>
 
 					<br/>
 
-					<pre><input type="checkbox" name="drawElement" value="faces" checked onChange="objs.drawFaces(this.checked);"/>Faces		<input type="color" id="colorFaces" value="#B4B4FF" onChange="objs.setFacesColor(this.value);"/><input type="checkbox" checked onChange="objs.linkMaterial(this.checked);"/>Use materials</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>
 
+					<input type="checkbox" value="edges" checked onChange="objs.drawEdges(this.checked);"/>Edges
 
+					<input type="color" value="#644646" onChange="objs.setEdgesColor(this.value);"/>
 
 					<br/>
 
 					<br/>
 
-					Rotation speed:<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/>&nbsp;&nbsp;(Drag the model with the mouse)<br/>
 
 					0% <input type="range" min="0" max="10" step="1" value="3" onInput="objs.setRotationSpeed(this.value);" onChange="objs.setRotationSpeed(this.value);"/>100%
 
 					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/>
 
+					<br/><br/>
 
+					Zoom speed:<br/>&nbsp;&nbsp;(Use the mousewheel to zoom in or out)<br/>
 
 					0% <input type="range" min="0" max="10" step="1" value="2" onInput="objs.setZoomSpeed(this.value);" onChange="objs.setZoomSpeed(this.value);"/>100%
 
 					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/>&nbsp;&nbsp;(Drag the model while holding the shift key)<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>
 
 				</td>
 
 			</tr>
 
 			</tr>
 
 		</table>
 
 		</table>

+ 51 - 15
script/ObJS.js
Tampilan Berkas 

@@ -18,6 +18,7 @@ function ObJS(){
 
 	var vertSize = 4; //Make it even: at small scales will look better
 
 	var vertSize = 4; //Make it even: at small scales will look better
 
 	var rotationSpeed = 90; //Smaller = faster. 100 is a good speed
 
 	var rotationSpeed = 90; //Smaller = faster. 100 is a good speed
 
 	var zoomSpeed = 0.161; //0-1. 0.2 or 0.3 are good speeds
 
 	var zoomSpeed = 0.161; //0-1. 0.2 or 0.3 are good speeds
 
+	var moveSpeed = .5;
 
 	
 	
 	/********************************************************************
 
 	/********************************************************************
 
 	 * Variable containing this object, to be refered from nested       *
 
 	 * Variable containing this object, to be refered from nested       *
 
@@ -118,11 +119,16 @@ function ObJS(){
 
 					return;
 
 					return;
 
 				var x = e.offsetX==undefined?e.layerX:e.offsetX;
 
 				var x = e.offsetX==undefined?e.layerX:e.offsetX;
 
 				var y = e.offsetY==undefined?e.layerY:e.offsetY;
 
 				var y = e.offsetY==undefined?e.layerY:e.offsetY;
 
-				thisObJS.rotateY(x - pX);
 
-				thisObJS.rotateX(y - pY);
 
+				if (e.shiftKey){
 
+					thisObJS.moveHorizontal(x - pX);
 
+					thisObJS.moveVertical(y - pY);
 
+				}
 
+				else{
 
+					thisObJS.rotateY(x - pX);
 
+					thisObJS.rotateX(y - pY);
 
+				}
 
 				pX = x;
 
 				pX = x;
 
 				pY = y;
 
 				pY = y;
 
-				draw();
 
 				return false;
 
 				return false;
 
 			};
 
 			};
 
 			
 			
@@ -294,10 +300,11 @@ function ObJS(){
 
 	}
 
 	}
 
 	
 	
 	/********************************************************************
 
 	/********************************************************************
 
-	 * Function that rotates elements in the canvas along the Y axis,   *
 
-	 * calculating the new position for each vertex in the vert array.  *
 
+	 * Functions that rotate elements in the canvas along the           *
 
+	 * correspondent axys, calculating the new position for each vertex *
 
+	 * in the vert array.                                               *
 
 	 * #parameters:                                                     *
 
 	 * #parameters:                                                     *
 
-	 *   des (int): mouse displacement from the last frame.             *
 
+	 *   des (int): distance to rotate.                                 *
 
 	 * #return: nothing                                                 *
 
 	 * #return: nothing                                                 *
 
 	 * #scope: public                                                   *
 
 	 * #scope: public                                                   *
 
 	 ********************************************************************/
 
 	 ********************************************************************/
 
@@ -308,16 +315,9 @@ function ObJS(){
 
 			vert[i][0] = x * Math.cos(des / rotationSpeed) - z * Math.sin(des / rotationSpeed);
 
 			vert[i][0] = x * Math.cos(des / rotationSpeed) - z * Math.sin(des / rotationSpeed);
 
 			vert[i][2] = z * Math.cos(des / rotationSpeed) + x * Math.sin(des / rotationSpeed);
 
 			vert[i][2] = z * Math.cos(des / rotationSpeed) + x * Math.sin(des / rotationSpeed);
 
 		}
 
 		}
 
+		draw();
 
 	};
 
 	};
 
 	
 	
-	/********************************************************************
 
-	 * Function that rotates elements in the canvas along the X axis,   *
 
-	 * calculating the new position for each vertex in the vert array.  *
 
-	 * #parameters:                                                     *
 
-	 *   des (int): mouse displacement from the last frame.             *
 
-	 * #return: nothing                                                 *
 
-	 * #scope: public                                                   *
 
-	 ********************************************************************/
 
 	this.rotateX = function(des){
 
 	this.rotateX = function(des){
 
 		for (var i = 0; i < vert.length; i ++) {
 
 		for (var i = 0; i < vert.length; i ++) {
 
 			var y = vert[i][1];
 
 			var y = vert[i][1];
 
@@ -325,6 +325,42 @@ function ObJS(){
 
 			vert[i][1] = y * Math.cos(des / rotationSpeed) - z * Math.sin(des / rotationSpeed);
 
 			vert[i][1] = y * Math.cos(des / rotationSpeed) - z * Math.sin(des / rotationSpeed);
 
 			vert[i][2] = z * Math.cos(des / rotationSpeed) + y * Math.sin(des / rotationSpeed);
 
 			vert[i][2] = z * Math.cos(des / rotationSpeed) + y * Math.sin(des / rotationSpeed);
 
 		}
 
 		}
 
+		draw();
 
+	};
 
+	
+	/********************************************************************
 
+	 * Function switching the movement speed of the model.              *
 
+	 * #parameters:                                                     *
 
+	 *   percent (int): Value (0-10) of speed.                          *
 
+	 * #return: nothing                                                 *
 
+	 * #scope: public                                                   *
 
+	 ********************************************************************/ 
+	this.setMovementSpeed = function(percent){
 
+		if (percent >= 0 && percent <= 10)
 
+			moveSpeed = ((percent * 0.8) / 10) + 0.01;
 
+		else
 
+			console.log("setMoveSpeed(" + percent + "); ERROR: Only values between 0 and 10 are allowed");
 
+	}
 
+	
+	/********************************************************************
 
+	 * Functions that move elements in the canvas along the selected    *
 
+	 * direction, calculating the new position for each vertex in the   *
 
+	 * vert array.                                                      *
 
+	 * #parameters:                                                     *
 
+	 *   des (int): distance to move.                                   *
 
+	 * #return: nothing                                                 *
 
+	 * #scope: public                                                   *
 
+	 ********************************************************************/
 
+	this.moveVertical = function(des){
 
+		for (var i = 0; i < vert.length; i ++)
 
+			vert[i][1] = (vert[i][1] * 1) + des * (moveSpeed / 50);
 
+		draw();
 
+	};
 
+	
+	this.moveHorizontal = function(des){
 
+		for (var i = 0; i < vert.length; i ++)
 
+			vert[i][0] = (vert[i][0] * 1) + des * (moveSpeed / 50);
 
+		draw();
 
 	};
 
 	};
 
 	
 	
 	/********************************************************************
 
 	/********************************************************************
 
@@ -592,7 +628,7 @@ function ObJS(){
 
 		ctx.fillStyle = textColor;
 
 		ctx.fillStyle = textColor;
 
 		ctx.font = "12px Arial";
 
 		ctx.font = "12px Arial";
 
 		var h = canvas.height / 2 - 14;
 
 		var h = canvas.height / 2 - 14;
 
-		var w = 10 - (canvas.height / 2);
 
+		var w = 10 - (canvas.width / 2);
 
 		ctx.fillText("ObJS:   " + totalVert + " vertizes   " + totalFace + " faces   " + totalMaterial + " materials", w, h);
 
 		ctx.fillText("ObJS:   " + totalVert + " vertizes   " + totalFace + " faces   " + totalMaterial + " materials", w, h);
 
 	};
 
 	};