我要创建“旋转氧气”按钮，“旋转氧气”按钮

Question

我正在学习Webgl ES。我编写的功能包括旋转和缩放...我想创建一个Rotate Ox按钮，Rotate Oz，以便当我单击该事件时，仅根据Oy创建一个Rotate按钮。我正在尝试创建“ 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>