add: lookat func

index.html

@@ -91,17 +91,41 @@
     <br/><hr>
 	<label>lookAt | </label>
     <br/>
-    <label>eye vector : </label>
-    <input style="width:400px" id="x_move" type="range" min="-100" max="100" value="0" oninput="fn_update_xmove(this.value);"></input>
-	<input style="width:60px" type="text" id="textXMove" value="0">
+    <label>eye vector (x-axis) : </label>
+    <input style="width:400px" id="x_eye" type="range" min="-100" max="100" value="0" oninput="fn_update_xeye(this.value);"></input>
+	<input style="width:60px" type="text" id="textXEye" value="0">
     <br/>
-    <label>Y-axis  : </label>
-    <input style="width:400px" id="y_move" type="range" min="-100" max="100" value="0" oninput="fn_update_ymove(this.value);"></input>
-	<input style="width:60px" type="text" id="textYMove" value="0">
+    <label>eye vector (y-axis) : </label>
+    <input style="width:400px" id="y_eye" type="range" min="-100" max="100" value="0" oninput="fn_update_yeye(this.value);"></input>
+	<input style="width:60px" type="text" id="textYEye" value="0">
     <br/>
-    <label>Z-axis Move : </label>
-    <input style="width:400px" id="z_move" type="range" min="-100" max="100" value="0" oninput="fn_update_zmove(this.value);"></input>
-	<input style="width:60px" type="text" id="textZMove" value="0">
+    <label>eye vector (z-axis) : </label>
+    <input style="width:400px" id="z_eye" type="range" min="-100" max="100" value="0" oninput="fn_update_zeye(this.value);"></input>
+	<input style="width:60px" type="text" id="textZEye" value="2">
+    <br/><hr>
+    <label>center vector (x-axis) : </label>
+    <input style="width:400px" id="x_center" type="range" min="-100" max="100" value="0" oninput="fn_update_xcenter(this.value);"></input>
+	<input style="width:60px" type="text" id="textXCenter" value="0">
+    <br/>
+    <label>center vector (y-axis) : </label>
+    <input style="width:400px" id="y_center" type="range" min="-100" max="100" value="0" oninput="fn_update_ycenter(this.value);"></input>
+	<input style="width:60px" type="text" id="textYCenter" value="0">
+    <br/>
+    <label>center vector (z-axis) : </label>
+    <input style="width:400px" id="z_center" type="range" min="-100" max="100" value="0" oninput="fn_update_zcenter(this.value);"></input>
+	<input style="width:60px" type="text" id="textZCenter" value="0">
+    <br/><hr>
+    <label>up vector (x-axis) : </label>
+    <input style="width:400px" id="x_up" type="range" min="-100" max="100" value="0" oninput="fn_update_xup(this.value);"></input>
+	<input style="width:60px" type="text" id="textXUp" value="0">
+    <br/>
+    <label>up vector (y-axis) : </label>
+    <input style="width:400px" id="y_up" type="range" min="-100" max="100" value="0" oninput="fn_update_yup(this.value);"></input>
+	<input style="width:60px" type="text" id="textYUp" value="1">
+    <br/>
+    <label>up vector (z-axis) : </label>
+    <input style="width:400px" id="z_up" type="range" min="-100" max="100" value="0" oninput="fn_update_zup(this.value);"></input>
+	<input style="width:60px" type="text" id="textZUp" value="0">
     <br/><hr>
 	</table>
 	<br/><br/>

script.js

@@ -176,7 +176,17 @@ var xMove = 0.0;
 var yMove = 0.0;
 var zMove = 0.0;
 
-var rotate_axis = 0.0;
+var xEye = 0.0;
+var yEye = 0.0;
+var zEye = 2.0;
+
+var xCenter = 0.0;
+var yCenter = 0.0;
+var zCenter = 0.0;
+
+var xUp = 0.0;
+var yUp = 1.0;
+var zUp = 0.0;
 /* modify end */
 
 function fn_speed_scale(a)
@@ -267,6 +277,71 @@ function fn_update_zmove(val)
   zMove = val; 
 }
 
+
+function fn_update_xeye(val)
+{
+  val = val / 100.0;
+  document.getElementById('textXEye').value = val; 
+  xEye = val; 
+}
+
+function fn_update_yeye(val)
+{
+  val = val / 100.0;
+  document.getElementById('textYEye').value = val; 
+  yEye = val; 
+}
+
+function fn_update_zeye(val)
+{
+  val = val / 100.0;
+  document.getElementById('textZEye').value = val; 
+  zEye = val; 
+}
+
+
+function fn_update_xcenter(val)
+{
+  val = val / 100.0;
+  document.getElementById('textXCenter').value = val; 
+  xCenter = val; 
+}
+
+function fn_update_ycenter(val)
+{
+  val = val / 100.0;
+  document.getElementById('textYCenter').value = val; 
+  yCenter = val; 
+}
+
+function fn_update_zcenter(val)
+{
+  val = val / 100.0;
+  document.getElementById('textZCenter').value = val; 
+  zCenter = val; 
+}
+
+function fn_update_xup(val)
+{
+  val = val / 100.0;
+  document.getElementById('textXUp').value = val; 
+  xUp = val; 
+}
+
+function fn_update_yup(val)
+{
+  val = val / 100.0;
+  document.getElementById('textYUp').value = val; 
+  yUp = val; 
+}
+
+function fn_update_zup(val)
+{
+  val = val / 100.0;
+  document.getElementById('textZUp').value = val; 
+  zUp = val; 
+}
+
 /* modify end */
 
 function fn_toggle(mode)
@@ -322,7 +397,7 @@ function renderScene() {
   mat4.rotateZ(mMat, mMat, zRot);
   
 	mat4.perspective(pMat, fov_degree * 3.141592 / 180.0 , 8.0/6.0 , 0.5, 6); 
-	mat4.lookAt(vMat, [0,0,2], [0.0 ,0.0, 0.0], [0,1,0]);
+	mat4.lookAt(vMat, [xEye,yEye,zEye], [xCenter, yCenter, zCenter], [xUp, yUp, zUp]);
   // mat4.frustum(vMat, -8.0/6.0, 8.0/6.0, 1, 1, 1, ); 
   
 	if (flag_animation == 1)