Update script.js

script.js

@@ -37,7 +37,7 @@ function initialStep(canvas) {
     catch (e) {
     }
     
-    // 3단계. 마우스가 눌린 채로 드래그하면 큐브가 회전할 수 있게 해준다.
+    ////// new code!
     var drag=false;
 
     var original_x, original_y;
@@ -50,12 +50,10 @@ function initialStep(canvas) {
 
         return false;
     };
-      // 마우스를 누른 경우 drag=1로 한 뒤 누른 점을 저장함.
 
     var Upward=function(e){
         drag=false;
     };
-      // 마우스가 눌리지 않은 경우 drag=0으로 함. 아무런 행동도 하지 않음.
 
     var Moving=function(e) {
         if (drag==false) return false;
@@ -70,14 +68,11 @@ function initialStep(canvas) {
 
         e.preventDefault();
     };
-      // 마우스가 눌린 채로 움직였다면 움직인 것에 맞게 회전 각의 값을 변화시킨다.
 
     canvas.addEventListener("mousedown", Downward, false);
     canvas.addEventListener("mouseup", Upward, false);
-      canvas.addEventListener("mouseout", Upward, false);
     canvas.addEventListener("mousemove", Moving, false);
-      // 각 경우에 맞게 작동하도록 한다.
-
+    //////
 
 }
 
@@ -203,20 +198,11 @@ function getShaders() {
 
 }
 
-// var angle = 0; 1단계에서 같이 삭제 (3/3)
 var idtmat = new Float32Array(16);
 
-    // 2단계. 마우스로 돌려주는 기능을 적용하기 위해 새로운 좌표평면의 단위 필요.
-    // -> 화면상 좌우, 상하로 마우스 이동이 가능.
-    // -> 상하로 마우스를 돌릴 경우 = x축 rotation
-    // -> 좌우로 마우스를 돌릴 경우 = y축 rotation
-    // -> 상하로 x_rad만큼, 좌우로 y_rad만큼 돌린다고 가정 후 변수 추가(1/2)
-
 var x_rad = 0;
 var y_rad = 0;
 
-
-
 function renderScene() {
 
     gl.clearColor(0.85, 0.85, 1, 1.0);
@@ -234,11 +220,6 @@ function renderScene() {
     var viwmatrix = new Float32Array(16);
     var prjmatrix = new Float32Array(16);
 
-    //var rotx = new Float32Array(16);
-    //var roty = new Float32Array(16);
-    //var rotz = new Float32Array(16);
-    // 1단계. 자동 rotation 기능 삭제(1/3)
-
     mat4.identity(wldmatrix);
     mat4.lookAt(viwmatrix, [0,0,-5], [0,0,0], [0,1,0]);
     mat4.perspective(prjmatrix, 3.14/4.0, canvas.width/canvas.height, 0.1, 1000);
@@ -246,21 +227,9 @@ function renderScene() {
     angle = performance.now()/5000*Math.PI;
     mat4.identity(idtmat);
 
-    //mat4.rotate(rotx, idtmat, angle, [-5,5,-5]);
-    //mat4.rotate(roty, idtmat, angle, [0,5,0]);
-    //mat4.rotate(rotz, idtmat, angle, [0,0,5]);
-    //mat4.mul(wldmatrix, rotx, roty);
-    //mat4.mul(wldmatrix, wldmatrix, rotz);
-    // 1단계. 자동 rotation 기능 삭제 
-    // -> wldmatrix의 값에만 적용한거라 그냥 삭제만 하면 끝!(2/3)
-
-
-
-    // 2단계. x_rad와 y_rad를 이용해 rotate를 할 수 있게 해준다.(2/2)
-    mat4.rotateX(wldmatrix, wldmatrix, -x_rad); //3단계에 부호!!
+    mat4.rotateX(wldmatrix, wldmatrix, -x_rad);
     mat4.rotateY(wldmatrix, wldmatrix, y_rad);
    
-   
     gl.uniformMatrix4fv(wldmatLoc, gl.FALSE, wldmatrix);
     gl.uniformMatrix4fv(viwmatLoc, gl.FALSE, viwmatrix);
     gl.uniformMatrix4fv(prjmatLoc, gl.FALSE, prjmatrix);
@@ -287,8 +256,6 @@ function main() {
     
     getShaders();
 
-    // 이하 코드 부분은 교수님께서 올려주신 코드를 썼습니다.
-
     requestAnimFrame = (function () {
         return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
             function (callback) {
@@ -304,4 +271,3 @@ function main() {
 
 
 }
-