WebGL插入计算的顶点值

Question

我正在尝试使用WebGL进行基本了解。

我有一个由6个三角形组成的模型，我想创建另外3个三角形，它们在每个三角形内部共享一个特定点。 具体点将是父三角形的中心/焦点（对不起，我不知道哪个术语正确）。 问题是，我不知道如何插入值来渲染模型。

 //This is my function to set the vertex-points for each triangle function setGeometry(gl) { gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ //vorne links (clockwise) -60, -52, 0, 0, 52, 0, 0, 0, 60, //vorne rechts (clockwise) 0, 0, 60, 0, 52, 0, 60, -52, 0, //vorne mitte (clockwise) 60, -52, 0, -60, -52, 0, 0, 0, 60, //Front mid inner mid (clockwise) 60, -52, 0, -60, -52, 0, getCenter([60, -52, 0], //This is where I call the function to get the Center of the parent [-60, -52, 0], //and return the values as a concatinated string [0, 0, 60]), //hinten links (counter-clockwise) -60, -52, 0, 0, 0, -60, 0, 52, 0, //hinten rechts (counter-clockwise) 0, 52, 0, 0, 0, -60, 60, -52, 0, //hinten mitte (counter-clockwise) 60, -52, 0, 0, 0, -60, -60, -52, 0, ]), gl.STATIC_DRAW); } //And this is the corresponding function to get the center. function getCenter(A,B,C){ var center = []; for(var i = 0; i < A.length; ++i){ center[i] = (A[i] + B[i] + C[i])/3; } return Math.round(center[0]) + "," + Math.round(center[1]) + "," + Math.round(center[2]); } 

我认为问题是，这些值将作为字符串而不是单独的整数返回。

出现以下错误消息：

glDrawArrays：尝试访问属性0中超出范围的顶点

我想不出一种适当的方法来获取价值。

我会向正确的方向提供任何提示。

Answer 1

是的，部分问题是您的getCenter函数返回了一个字符串。 我建议返回一个三元素数组：

function getCenter(A,B,C){
    var center = [];
    for(var i = 0; i < A.length; ++i){
        center[i] = Math.round((A[i] + B[i] + C[i])/3);
    }
    return center;
}

现在，您需要将这三个值插入到坐标数组中。 如果您使用的是现代浏览器，则可以使用... “ spread”语法 ...

[-60, -52, 0, ...getCenter(A, B, C), -60, -52, 0]

...否则，您将不得不使用concat() ...

[-60, -52, 0].concat(getCenter(A, B, C)).concat([-60, -52, 0])