Skip to content
Snippets Groups Projects
Commit 800968ea authored by Jiyoung Moon's avatar Jiyoung Moon
Browse files

Update index.html

parent f9b69823
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 83 additions and 27 deletions
index.html
+ 83
− 27
View file @ 800968ea
...@@ -39,8 +39,16 @@ SOFTWARE. ...@@ -39,8 +39,16 @@ SOFTWARE.
</script> </script>
<script type="text/javascript" src="gl-matrix.js"> <script type="text/javascript" src="gl-matrix.js">
</script> </script>
<script type="text/javascript" src="script_step1.js"> <style>
</script> code {
font-family: Consolas,"courier new";
color: crimson;
background-color: #f1f1f1;
padding: 2px;
font-size: 105%;
}
</style>
<script> <script>
window['mat4'] = glMatrix.mat4; window['mat4'] = glMatrix.mat4;
...@@ -52,37 +60,85 @@ SOFTWARE. ...@@ -52,37 +60,85 @@ SOFTWARE.
<body onload="main()"> <body onload="main()">
<canvas id="canvas" width="600" height="400"></canvas> <canvas id="canvas" width="600" height="400"></canvas>
<h2></br></br>Before we start! You have to prepare...</h2> <h2></br></br>Before we start! You have to prepare...</h2>
<p>Our tutorial doesn't teach you the basic things of WebGL.</br> <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> 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> The prepared code and the output of the code should be like this.</br>
<img src=self-rotating-cube.gif></img></br> <object data = "cube.txt", width="600", height="400"></object>
<p>If you don't have any codes of self-rotating 3D cube, use this code and follow me!</p> <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> <h2></br></br>Let's begin!</h2>
<h3>Step1. Remove some codes.</h3> <h3>Step1. Remove some codes.</h3>
<p>In this step, we will modify some codes. </br> <p>
In this step, we will modify some codes. </br>
Our tutorial is to make a mouse dragging transformation camera. </br> Our tutorial is to make a mouse dragging transformation camera. </br>
So we'll remove some unneeded codes. </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> These are the codes that should be removed. </br>
This is the final code and the result of the step 1.</p> <code>var angle = 0;</code></br>
<object data = "script_step1.js", width="600", height="400"></object> <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> <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> <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> In our screen, we can move the mouse "Up-Down", and "Left-Right". </br>
See the below. </br> See the below. </br></br>
<img src=rotatingx.gif></img> </br>
<img src="rotatingx.gif"></img> </br>
The cube rotating "Up-Down" is x axis rotation. </br></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>
<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> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr