diff --git a/script.js b/script.js index f3e520170ec01ffe3dca4eeb266ce3483b05f123..17facd315cbb276906bedc72b6f4df845680b243 100644 --- a/script.js +++ b/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; @@ -69,15 +67,12 @@ function initialStep(canvas) { original_y = e.pageY; e.preventDefault(); - }; - // 마우스가 눌린 채로 움직였다면 움직인 것에 맞게 회전 각의 값을 변화시킨다. - - canvas.addEventListener("mousedown", Downward, false); - canvas.addEventListener("mouseup", Upward, false); - canvas.addEventListener("mouseout", Upward, false); - canvas.addEventListener("mousemove", Moving, false); - // 각 경우에 맞게 작동하도록 한다. + }; + canvas.addEventListener("mousedown", Downward, false); + canvas.addEventListener("mouseup", Upward, false); + canvas.addEventListener("mousemove", Moving, false); + ////// } @@ -203,19 +198,10 @@ 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; - +var idtmat = new Float32Array(16); +var x_rad = 0; +var y_rad = 0; function renderScene() { @@ -234,32 +220,15 @@ 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); 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); @@ -287,8 +256,6 @@ function main() { getShaders(); - // 이하 코드 부분은 교수님께서 올려주신 코드를 썼습니다. - requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { @@ -304,4 +271,3 @@ function main() { } -