Hi. Today, we'll learn how to transform camera using mouse dragging in WebGL.
The output of this tutorial will be like this. See it!!!
Our tutorial doesn't teach you the basic things of WebGL.
We will start with a code of self-rotating 3D cube.
The prepared code and the output of the code should be like this.
If you don't have any codes of self-rotating 3D cube, use this code and follow me!
In this step, we will modify some codes.
Our tutorial is to make a mouse dragging transformation camera.
So we'll remove some unneeded codes.
These are the codes that should be removed.
var angle = 0;
var rotx = new Float32Array(16);
var roty = new Float32Array(16);
var rotz = new Float32Array(16);
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);
These codes were for self rotation of the cube.
So these don't be needed!
This is the final code and the result of the step 1.
It's just showing the front face of the cube.
As you know, our model camera should move around the cube by the dragging.
In our screen, we can move the mouse "Up-Down", and "Left-Right".
See the below.
The cube rotating "Up-Down" is x axis rotation.
And the cube rotating "Left-Right" is y axis rotation.
So we will add 2 variables, x_rad and y_rad.
Then, using x_rad, wldmatrix will be rotated by x axis.
Also, using y_rad, wldmatrix will be rotated by y axis.
These two variables, x_rad and y_rad will be also used in the other function, so they will be a global variables.
This is the final code and the result of the step 2.
Still, we don't add any codes for mouse dragging, so the cube's just showing the front face.
It's almost done!
In this step, we will use EventListener of JS and HTML DOM event.
We need 3 functions, Downward, upward, Moving, and 1 variable, drag.
When you clicked the canvas, the Downward function will be run.
Downward stores the dragging point's coordinate values.
The dragging point is the starting point of the mouse movement.
Using pageX and pageY, we can get the dragging point's coordinate values.
Each coordinate values will be stored to original_x and original_y.
And make the drag value to true.
When you don't click the canvas or when your mouse cursor is getting out of the canvas, the Upward function will be run.
Upward do nothing except changing the drag value to false.
When you move your mouse, the Moving function will be run.
Moving gets the mouse's new coordinates.
Then, using the original_x, original_y, pageX and pageY, we will get gap_x and gap_y.
These two values, gap_x and gap_y, is the difference between original coordinates and new coordinates(present coordinates).
Using gap_x and gap_y, we will change the x_rad and y_rad.
And finally, the original_x and original_y should be changed to present coordinate values for next movement.
But, when you aren't dragging and just moving your mouse cursor, the Moving function should not be run.
So, in the Moving function, we have to add some if statement that only when the drag is true, Moving function can be run.
This is the final code of step3.
When you see the final code, there's something strange.
y_rad += gap_x*3/canvas.width;
x_rad += gap_y*3/canvas.height;
Why y_rad is changed using the gap_x, not the gap_y?
Also, why x_rad is changed using the gap_y, not the gap_x?
See this.
I think you can understand the gif file's description.
Also, you can change some codes.
For example,
y_rad += gap_x*3/canvas.width;
x_rad += gap_y*3/canvas.height;
to
y_rad += gap_x/canvas.width;
x_rad += gap_y/canvas.height;.