Javascript 如何使用鼠标x和y坐标绘制三角形以指定WebGL中的顶点？

我正在尝试基于顶点创建三角形。我的想法如下：我将点存储在一个数组g_points中，每当有三个新点时，它都应该使用这些点作为顶点绘制三角形。例如：g_点=[0,1,2]->使用顶点0、1和2绘制三角形。现在还有三次点击，因此g_points=[0,1,2,6,5,4]->在顶点[6,5,4]上绘制上一个三角形加上新三角形。以下是我正在使用的代码：

"use strict";

var gl;
var points;


window.onload = function init()
{
    var canvas = document.getElementById( "gl-canvas" );

    gl = canvas.getContext('webgl2');
    if (!gl) { alert( "WebGL 2.0 isn't available" ); }

    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( program );

   
    var aPosition = gl.getAttribLocation(program, "aPosition")


    //
    //  Configure WebGL
    //
    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    //  Load shaders and initialize attribute buffers

    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( program );

    // Load the data into the GPU

    
    canvas.onmousedown = function(ev){ click(ev, gl, canvas, aPosition); };

    gl.clear(gl.COLOR_BUFFER_BIT);
};



var g_points = []; // store the points that already have been clicked

function click(ev, gl, canvas, aPosition) {//Mouse click function
    var x = ev.clientX; // The x coordinate of the mouse click
    var y = ev.clientY; // the y coordinate of the mouse click
 
    //Get the coordinates of the canvas in the client area of ​​the browser
    var rect = ev.target.getBoundingClientRect() ;

    //Change of coordinates between canvas and clip space
    x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
    y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
        // Store the coordinates in the g_points array
    g_points.push(x); g_points.push(y);

        // clear canvas
    gl.clear(gl.COLOR_BUFFER_BIT);

    var len = g_points.length;

    if (len%3 == 0) {
        console.log(g_points)
        for(var i = 0; i < len; i += 3) {
            
            
            // Transfer the position of the point to the attribute variable
            gl.vertexAttrib3f(aPosition, g_points[i], g_points[i+1], 0.0);

            // draw
            gl.drawArrays(gl.POINT, 0, 1);
            
        }
    }
}

“严格使用”；
var-gl；
var点；
window.onload=函数init（）
{
var canvas=document.getElementById（“gl画布”）；
gl=canvas.getContext（'webgl2'）；
如果（！gl）{alert（“WebGL 2.0不可用”）；}
var program=initShaders（gl，“顶点着色器”、“片段着色器”）；
gl.useProgram（程序）；
var aPosition=gl.getAttriblLocation（程序，“aPosition”）
//
//配置WebGL
//
总图视口（0，0，canvas.width，canvas.height）；
gl.clearColor（1.0,1.0,1.0,1.0）；
//加载着色器并初始化属性缓冲区
var program=initShaders（gl，“顶点着色器”、“片段着色器”）；
gl.useProgram（程序）；
//将数据加载到GPU中
canvas.onmousedown=函数（ev）{单击（ev，gl，canvas，aPosition）；}；
总账清除（总账颜色缓冲位）；
};
var g_points=[]；//存储已单击的点
功能点击（ev、gl、画布、位置）{//鼠标点击功能
var x=ev.clientX；//鼠标单击的x坐标
var y=ev.clientY；//鼠标单击的y坐标
//获取的客户端区域中画布的坐标​​浏览器
var rect=ev.target.getBoundingClientRect（）；
//更改画布和剪辑空间之间的坐标
x=（（x-rect.left）-canvas.width/2）/（canvas.width/2）；
y=（canvas.height/2-（y-rect.top））/（canvas.height/2）；
//将坐标存储在g_点数组中
g_点推动（x）；g_点推动（y）；
//透明帆布
总账清除（总账颜色缓冲位）；
var len=g_点长度；
如果（长度%3==0）{
控制台日志（g_点）
对于（变量i=0；i

主要思想在单击功能中实现。现在，我所能做的就是每隔三次点击就在画布上显示点，所以我想我的问题是如何将正确的数据发送到缓冲区。稍后，我将更改此函数以接受具有任意数量顶点的多边形，因此我尝试使此单击函数尽可能简单，以便稍后修改它以添加此功能