Hello!

I have a code that renders 3D cube and rotates on WebGL but I want to modify it into the 2D polygon 3D polygon by calculating a 2d vector based on the mouse coordinates and push in into an array. I have snippets of the code that I want to implement into mine but I am having troubles with it. I still want to keep the eventListener of rotating the polygon by mouse.

//snippet of the code I wan to implement into mine //function used to store the coordinates of the mouse click and send it to the buffer canvas.addEventListener("mousedown", function(event){ //we calculate a 2d vector based on the mouse coordinates and push in into an array var mouseCoordinate = vec2(2 * event.clientX / canvas.width - 1,2*(canvas.height - event.clientY)/canvas.height - 1); verticesArray.push(mouseCoordinate); //Increment the number of vertices each time we click on the blank canvas numberOfVertices++ }); //storing the vertices for the polygon in the array //front vertices for (var i=0; i//this is my html code I want to modify //this is js code "use strict"; var canvas; var gl; var axis = 0; var xAxis = 0; var yAxis =1; var zAxis = 2; var theta = [0, 0, 0]; var thetaLoc; var flag = true; var numElements = 29; var vertices = [ vec3(-0.5, -0.5, 0.5), vec3(-0.5, 0.5, 0.5), vec3(0.5, 0.5, 0.5), vec3(0.5, -0.5, 0.5), vec3(-0.5, -0.5, -0.5), vec3(-0.5, 0.5, -0.5), vec3(0.5, 0.5, -0.5), vec3(0.5, -0.5, -0.5) ]; var vertexColors = [ vec4(0.0, 0.0, 0.0, 1.0), // black vec4(1.0, 0.0, 0.0, 1.0), // red vec4(1.0, 1.0, 0.0, 1.0), // yellow vec4(0.0, 1.0, 0.0, 1.0), // green vec4(0.0, 0.0, 1.0, 1.0), // blue vec4(1.0, 0.0, 1.0, 1.0), // magenta vec4(1.0, 1.0, 1.0, 1.0), // white vec4(0.0, 1.0, 1.0, 1.0) // cyan ]; // indices of the 12 triangles that compise the cube var indices = [ 1, 0, 3, 2, 255, 2, 3, 7, 2, 255, 3, 0, 4, 7, 255, 6, 5, 1, 2, 255, 4, 5, 6, 7, 255, 5, 4, 0, 1 ]; window.onload = function init() { canvas = document.getElementById("gl-canvas"); gl = canvas.getContext('webgl2'); if (!gl) alert("WebGL 2.0 isn't available"); gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(1.0, 1.0, 1.0, 1.0); gl.enable(gl.DEPTH_TEST); gl.enable(gl.PRIMITIVE_RESTART_FIXED_INDEX); // // Load shaders and initialize attribute buffers // var program = initShaders(gl, "vertex-shader", "fragment-shader"); gl.useProgram(program); // array element buffer var iBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW); // color array atrribute buffer var cBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW); var colorLoc = gl.getAttribLocation(program, "aColor"); gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(colorLoc); // vertex array attribute buffer var vBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); var positionLoc = gl.getAttribLocation( program, "aPosition"); gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(positionLoc ); thetaLoc = gl.getUniformLocation(program, "uTheta"); //event listeners for buttons document.getElementById( "xButton" ).onclick = function () { axis = xAxis; }; document.getElementById( "yButton" ).onclick = function () { axis = yAxis; }; document.getElementById( "zButton" ).onclick = function () { axis = zAxis; }; document.getElementById("ButtonT").onclick = function(){flag = !flag;}; render(); } function render() { gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); if(flag) theta[axis] += 2.0; gl.uniform3fv(thetaLoc, theta); gl.drawElements(gl.TRIANGLE_FAN, numElements, gl.UNSIGNED_BYTE, 0); requestAnimationFrame(render); }