MENU


Rotation

We can rotate an object by dragging the mouse, recording the coordinates, and calculating the distances covered.


RESETRUNFULL
<!DOCTYPE html><html><head>
<script src="/shared/webgl-library.js"></script>
<script id="vs" type="x-shader/x-vertex">
   attribute vec4 p;
   uniform mat4 u_modelMatrix;
   void main(){
      gl_Position = u_modelMatrix * p;
   }
</script>
<script id="fs" type="x-shader/x-fragment">
   precision mediump float;
   void main(){
      gl_FragColor=vec4(1.0,1.0,1.0,1.0);
   }
</script>
<script>
function initEventHandlers(canvas, currentAngle) {
  var dragging = false;
  var lastX = -1, lastY = -1;
  canvas.onmousedown = function(ev) {
    var x = ev.clientX, y = ev.clientY;
    var rect = ev.target.getBoundingClientRect();
    if (rect.left <= x && x < rect.right &&
         rect.top <= y && y < rect.bottom) {
      lastX = x; lastY = y;
      dragging = true;
    }
  };
  canvas.onmouseup = function(ev) { dragging = false;};
  canvas.onmousemove = function(ev) {
    var x = ev.clientX, y = ev.clientY;
    if (dragging) {
      var factor = 100/canvas.height;
      var dx = factor * (x - lastX);
      var dy = factor * (y - lastY);
      currentAngle[0] = Math.max(Math.min(currentAngle[0] + dy, 90.0), -90.0);
      currentAngle[1] = currentAngle[1] + dx;
    }
    lastX = x, lastY = y;
  };
}
function WebGLStart(){
   var canvas = document.getElementById("myCanvas");
   var gl = canvas.getContext("webgl");
   initShaders(gl,"vs","fs");
   var vertices = new Float32Array([0.0,-0.5,0.0,  -0.5,0.5,0.0,  0.5,0.5,0.0]);
   initArrayBuffer(gl, 'p', vertices, 3);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   var u_modelMatrix = gl.getUniformLocation(gl.program, 'u_modelMatrix');
   var modelMatrix = new Matrix4();
   var currentAngle = [0.0, 0.0]; // ([x-axis, y-axis] degrees)
   initEventHandlers(canvas, currentAngle);
   var tick = function() {
      modelMatrix.setIdentity();
      modelMatrix.rotate(currentAngle[0], 1.0, 0.0,0.0); //x-axis
      modelMatrix.rotate(currentAngle[1], 0.0, 1.0,0.0); //y-axis
      gl.uniformMatrix4fv(u_modelMatrix,false, modelMatrix.entries);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES,0,3);
      requestAnimationFrame(tick, canvas);
   };
   tick();
}
</script></head>
<body onload="WebGLStart()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body></html>