diff --git a/index.html b/index.html index ec8c617ee5cbc75fa90b32fb1fb98ae6524da7a1..9e0bef1fb212d34573264a00eec737a42dc3d641 100644 --- a/index.html +++ b/index.html @@ -39,8 +39,16 @@ SOFTWARE. </script> <script type="text/javascript" src="gl-matrix.js"> </script> - <script type="text/javascript" src="script_step1.js"> - </script> + <style> + code { + font-family: Consolas,"courier new"; + color: crimson; + background-color: #f1f1f1; + padding: 2px; + font-size: 105%; + } + </style> + <script> window['mat4'] = glMatrix.mat4; @@ -52,37 +60,85 @@ SOFTWARE. <body onload="main()"> <canvas id="canvas" width="600" height="400"></canvas> <h2></br></br>Before we start! You have to prepare...</h2> - <p>Our tutorial doesn't teach you the basic things of WebGL.</br> - We will start with a code of self-rotating 3D cube.</br> - The prepared code and the output of the code should be like this.</p> - <img src=self-rotating-cube.gif></img></br> - <p>If you don't have any codes of self-rotating 3D cube, use this code and follow me!</p> + <p> + Our tutorial doesn't teach you the basic things of WebGL.</br> + We will start with a code of self-rotating 3D cube.</br> + The prepared code and the output of the code should be like this.</br> + <object data = "cube.txt", width="600", height="400"></object> + <img src="self-rotating-cube.gif"></img></br> + If you don't have any codes of self-rotating 3D cube, use this code and follow me!</br> + </p> <h2></br></br>Let's begin!</h2> <h3>Step1. Remove some codes.</h3> - <p>In this step, we will modify some codes. </br> - Our tutorial is to make a mouse dragging transformation camera. </br> - So we'll remove some unneeded codes. </br> - These are the codes that should be removed. BUTTON????NEED TO SHOW CODES THAT SHOULD BE REMOVED!! </br> - This is the final code and the result of the step 1.</p> - <object data = "script_step1.js", width="600", height="400"></object> + <p> + In this step, we will modify some codes. </br> + Our tutorial is to make a mouse dragging transformation camera. </br> + So we'll remove some unneeded codes. </br> + These are the codes that should be removed. </br> + <code>var angle = 0;</code></br> + <code>var rotx = new Float32Array(16);</code> </br> + <code>var roty = new Float32Array(16);</code> </br> + <code>var rotz = new Float32Array(16);</code> </br> + <code>mat4.rotate(rotx, idtmat, angle, [-5,5,-5]);</code> </br> + <code>mat4.rotate(roty, idtmat, angle, [0,5,0]);</code> </br> + <code>mat4.rotate(rotz, idtmat, angle, [0,0,5]);</code> </br> + <code>mat4.mul(wldmatrix, rotx, roty);</code> </br> + <code>mat4.mul(wldmatrix, wldmatrix, rotz);</code> </br> + These codes were for self rotation of the cube. </br> + So these don't be needed! </br> + This is the final code and the result of the step 1. </br> + <object data = "script_step1.txt", width="600", height="400"></object> + <img src="script_step1_output.png", width="600", height="400"></img></br> + It's just showing the front face of the cube.</br> + </p> <h3></br></br>Step2. Use new variables.</h3> - <p>As you know, our model camera should be move around the cube by the dragging. </br> - In our screen, we can move the mouse "Up-Down", and "Left-Right". </br> - See the below. </br> - <img src=rotatingx.gif></img> </br> - The cube rotating "Up-Down" is x axis rotation. </br></br> - <img src=rotatingy.gif></img> </br> - And the cube rotating "Left-Right" is y axis rotation. </br> - BUTTONS TO THE NEXT VARIABLES!!!!!! </br> - So we will add 2 variables, x_rad and y_rad. </br> - Then, using x_rad, wldmatrix will be rotated by x axis. </br> - Also, using y_rad, wldmatrix will be rotated by y axis. </br> - This is the final code and the result of the step 2.</p> - <object data = "script_step2.js", width="600", height="400"></object> - + <p> + As you know, our model camera should be move around the cube by the dragging. </br> + In our screen, we can move the mouse "Up-Down", and "Left-Right". </br> + See the below. </br></br> + + <img src="rotatingx.gif"></img> </br> + The cube rotating "Up-Down" is x axis rotation. </br></br> + + <img src="rotatingy.gif"></img> </br> + And the cube rotating "Left-Right" is y axis rotation. </br></br> + + So we will add 2 variables, <code>x_rad</code> and <code>y_rad</code>.</br> + Then, using <code>x_rad</code>, <code>wldmatrix</code> will be rotated by x axis. </br> + Also, using <code>y_rad</code>, <code>wldmatrix</code> will be rotated by y axis. </br> + These two variables, <code>x_rad</code> and <code>y_rad</code> will be also used in the other function, so they will be a global variables. </br> + This is the final code and the result of the step 2. </br> + <object data = "script_step2.txt", width="600", height="400"></object></br> + Still, we don't add any codes for mouse dragging, so the cube's just showing the front face. </br> + </p> + + <h3></br></br>Step3. Add some codes so that the mouse can drag the cube!</h3> + <p> + It's almost done!</br> + In this step, we will use <code>EventListener</code> of JS and HTML DOM event.</br></br> + We need 3 functions, <code>Downward</code>, <code>upward</code>, <code>Moving</code>, and 1 variable <code>drag</code>.</br></br> + When you clicked the canvas, the <code>Downward</code> function will be run. </br> + <code>Downward</code> stores the dragging point's coordinate values. </br> + The dragging point is the starting point of the mouse movement.</br> + Using <code>pageX</code> and <code>pageY</code>, we can get the dragging point's coordinate values. </br> + Each coordinate values will be stored to <code>original_x</code> and <code>original_y</code>.</br> + And make the <code>drag</code> value to <code>true</code>.</br></br> + + When you don't click the canvas, the <code>Upward</code> function will be run. </br> + <code>Upward</code> do nothing except changing the <code>drag</code> value to false. </br></br> + + When you move your mouse, the <code>Moving</code> function will be run. </br> + <code>Moving</code> gets the mouse's new coordinates. </br> + Then, using the <code>original_x</code>, <code>original_y</code>, <code>pageX</code> and <code>pageY</code>, we will get <code>gap_x</code> and <code>gap_y</code>. </br> + These two values, <code>gap_x</code> and <code>gap_y</code>, is the difference between original coordinates and new coordinates(present coordinates). </br> + Using <code>gap_x</code> and <code>gap_y</code>, we will change the <code>x_rad</code> and <code>y_rad</code>. </br> + + But, when you don't dragging and just moving your mouse cursor, + + </p> </body>