Я хочу создать кнопку Повернуть Вол, кнопку Повернуть Оз

Question

Я учусь о Webgl ES. Функции, которые я пишу, включают вращение и масштабирование... Я хочу создать кнопку "Повернуть быка", "Повернуть оз", чтобы при нажатии на событие я просто создал кнопку поворота в соответствии с "Оу". Я пытаюсь создать кнопку Ox Oz, но я не знаю, в какой части я хочу, чтобы вы мне помогли...

Это мой исходный код, с нетерпением жду вашей помощи, я хотел бы помочь вам создать кнопку Ox Oz и обработать событие https://files.fm/u/atfja53r

 var VSHADER_SOURCE =
'attribute vec4 a_Position;\n'+
'uniform mat4 u_Matrix;\n'+
'uniform mat4 u_pMatrix;\n'+
'attribute vec2 a_TexCoord;\n'+
'varying vec2 v_TexCoord; \n'+
'varying vec3 v_LightWeighting;\n'+
'uniform vec3 u_LightWeighting;\n'+
'void main(){ \n'+
'gl_Position = u_Matrix * a_Position; \n'+
'v_TexCoord  = a_TexCoord;\n'+
'v_LightWeighting = u_LightWeighting;\n'+
'}\n';
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform sampler2D u_Sampler;\n' + 
'varying vec2 v_TexCoord;\n'+ 
'varying vec3 v_LightWeighting;\n'+
'void main(){ \n'+
'vec4 textureColor = texture2D(u_Sampler, vec2(v_TexCoord.s, v_TexCoord.t));\n'+
'gl_FragColor = vec4(textureColor.rgb * v_LightWeighting, textureColor.a);\n'+
'}\n';

var current_earthAngle = 0.0;
var moonAngle = 100;
var earthAngle = 2730;
var earth_moon = 90.0;
var currentMoon_EarthAngle = 0;
var current_galaxyAngle = 0;
var galaxyAngle = 50;

var z = -20;
function main(){ 
 var canvas = document.getElementById('webgl');
 var gl = getWebGLContext(canvas);
 if(!gl){
  console.log('Failed to get the redenring context for webGL');
  return;
 }

 if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
  return;
 }
 var n = initVertexBuffers(gl);
 //
 if(!initTextures(gl, n)){
  return;
 }
 //
 if(n < 0){
  console.log('Failed to get the positions of the vertices');
   return;
 }

 canvas.onmousedown = handleMouseDown;

 gl.clearColor(0.1,0.1,0.1,1);
 gl.enable(gl.DEPTH_TEST);

 var u_Matrix = gl.getUniformLocation(gl.program, 'u_Matrix');
 var u_LightWeighting = gl.getUniformLocation(gl.program,'u_LightWeighting');
 gl.uniform3f(u_LightWeighting,1,1,1);
 var mMatrix = new Matrix4();

 var tick = function(){
  animate();
  draw(gl,n,u_Matrix,mMatrix,canvas,u_LightWeighting);
  requestAnimationFrame(tick);
 };
 tick();
}
var vertexPositionData = [];
var normalData = [];
var textureCoordData = [];
var indexData = [];
function initVertexBuffers(gl){
 var latitudeBands = 50;
 var longitudeBands = 50;
 var radius = 1;
 for (var latNumber=0; latNumber <= latitudeBands; latNumber++) {
  var theta = latNumber * Math.PI / latitudeBands;
  var sinTheta = Math.sin(theta);
  var cosTheta = Math.cos(theta);

  for (var longNumber=0; longNumber <= longitudeBands; longNumber++) {
   var phi = longNumber * 2 * Math.PI / longitudeBands;
   var sinPhi = Math.sin(phi);
   var cosPhi = Math.cos(phi);

   var x = cosPhi * sinTheta;
   var y = cosTheta;
   var z = sinPhi * sinTheta;
   var u = 1- (longNumber / longitudeBands);
   var v = 1- (latNumber / latitudeBands);

   normalData.push(x);
   normalData.push(y);
   normalData.push(z);
   textureCoordData.push(-u);
   textureCoordData.push(v);
   vertexPositionData.push(radius * x);
   vertexPositionData.push(radius * y);
   vertexPositionData.push(radius * z);
  }
 }

        for (var latNumber=0; latNumber < latitudeBands; latNumber++) {
            for (var longNumber=0; longNumber < longitudeBands; longNumber++) {
                var first = (latNumber * (longitudeBands + 1)) + longNumber;
                var second = first + longitudeBands + 1;
                indexData.push(first);
                indexData.push(second);
                indexData.push(first + 1);

                indexData.push(second);
                indexData.push(second + 1);
                indexData.push(first + 1);
            }
        }
 var n = indexData.length;
 return n;
}
var texture_earth;
var texture_moon;
function initTextures(gl, n){
 texture_earth = gl.createTexture();
 texture_earth.image = new Image();
 texture_earth.image.onload = function(){loadTexture(gl, n, texture_earth); }
 texture_earth.image.src = 'resources/earth.jpg'; 
 
 
 
 return true;
 
 }
 function loadTexture(gl,n,texture){
 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 gl.bindTexture(gl.TEXTURE_2D, texture);
 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
 gl.generateMipmap(gl.TEXTURE_2D);
 gl.bindTexture(gl.TEXTURE_2D, null);
}
function  draw(gl,n,u_Matrix,mMatrix,canvas,u_LightWeighting){
 gl.clear(gl.COLOR_BUFFER_BIT); 
 gl.enable(gl.DEPTH_TEST);
 gl.clear(gl.DEPTH_BUFFER_BIT);

 var u_Sampler=gl.getUniformLocation(gl.program,'u_Sampler');

 gl.uniform3f(
        u_LightWeighting,
        parseFloat(document.getElementById("ambientR").value),
        parseFloat(document.getElementById("ambientG").value),
        parseFloat(document.getElementById("ambientB").value)
    );
 var e = document.getElementById("earth");
 

 // Enable the texture unit 0   
 gl.activeTexture(gl.TEXTURE0); 
 gl.bindTexture(gl.TEXTURE_2D, texture_earth);
 gl.uniform1i(u_Sampler,0);
 //
 var vertexBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW); 

 var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
 gl.vertexAttribPointer(a_Position , 3, gl.FLOAT, false, 0, 0);
 gl.enableVertexAttribArray(a_Position); 
 ////
 var vertex1Buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, vertex1Buffer); 
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW); 

 var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
 gl.vertexAttribPointer(a_TexCoord , 2, gl.FLOAT, false, 0, 0);
 gl.enableVertexAttribArray(a_TexCoord); 
 //
 var vertexIndexBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STATIC_DRAW);

 if(e.checked){
  mMatrix.setPerspective(50,canvas.width/canvas.height,1,100); 

  
  mMatrix.translate(0,0,z).rotate(current_earthAngle,0,1,0).scale(3.67,3.67,3.67);
  
  gl.uniformMatrix4fv(u_Matrix, false, mMatrix.elements); 
  
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
 }
 

 
 
 
}

var g_last = Date.now();
function animate(){
 var nows =Date.now();
 var elapsed = nows - g_last;
 g_last = nows;
 
 current_earthAngle = (current_earthAngle + (earthAngle + elapsed) /1000) % 360;
 
 
}
function degToRad(degrees) {
    return degrees * Math.PI / 180;
}
function Zoom(){
 if(z < -10)
  z++;
}
function unZoom(){
 if (z > -30)
 z--;
}

var _fast = 1;
function fast(){
 if(_fast<10)
 _fast++;
 moonAngle = 100 * _fast;
 earthAngle = 2730 * _fast;
 earth_moon = 90 * _fast;
}
function slow(){
 if(_fast>1)
 _fast--;
 moonAngle = 100 * _fast;
 earthAngle = 2730 * _fast;
 earth_moon = 90 * _fast;
}
function pause(){
 _fast = 0;
 moonAngle = 0;
 earthAngle = 0;
 earth_moon = 0;
}
function _continue(){
 _fast = 1;
 
 earthAngle = 2730 * _fast;


}
var mouseDown = true;
function handleMouseDown(event) {
    if(mouseDown) 
    {
     pause();
     mouseDown = false;
    }
    else{
     _continue();
     mouseDown = true;
    } 

}

<html>
<head>
 <meta charset="utf-8"/>
 <title>Bài tập lớn</title>
 
</head>
<body onload="main()">
 <canvas id="webgl" width="1300" height="600">
 
 </canvas>
 <script lang="JavaScript" src="lib/webgl-utils.js"></script>
 <script lang="JavaScript" src="lib/webgl-debug.js"></script>
 <script lang="JavaScript" src="lib/cuon-utils.js"></script>
 <script lang="JavaScript" src="lib/cuon-matrix.js"></script>
 <script lang="JavaScript" src="canvas.js"></script>
 <br><br>
 <input type="button" name="" id = "zoom" onclick = "Zoom()" value="Zoom">
    <input type="button" name="" id = "unzoom" onclick = "unZoom()" value="unZoom">
    <input type="button" name="" id = "fast" onclick="fast()" value="Fast">
    <input type="button" name="" id = "slow" onclick="slow()" value="Slow">
    <input type="button" name="" id = "pause" onclick="pause()" value="Pause">
    <input type="button" name="" id = "continue" onclick="_continue()" value="Rotate Oy">
    <br>
 <h3>LIGHT:</h3>
    <table style="border: 0; padding: 0px;">
        <tr>
            <td><b>Colour:</b>
            <td>R: <input type="text" id="ambientR" value="1.0" />
            <td>G: <input type="text" id="ambientG" value="1.0" />
            <td>B: <input type="text" id="ambientB" value="1.0" />
        </tr>
    </table>
    <br>
    <h3>DISPLAY:</h3>
    <table style="border: 0; padding: 0px;">
        <tr>
            <td>EARTH: <input type="checkbox" id="earth"/ checked="">
            <td>MOON: <input type="checkbox" id="moon"/ checked="">
            <td>BACKGROUND: <input type="checkbox" id="galaxy" checked="" />
        </tr>
    </table>

 
 
 
</body>
</html>