webgl三角形旋转鼠标位置

Question

我想要像gif（旋转三角形）

我的代码......

startPos[0] => first mouse down position X
startPos[1] => first mouse down position Y
endPos[0] => mousemove position X
endPos[1] => mousemove position Y

floatarray = new Float32Array(12);
floatarray[0] = startPos[0];
floatarray[1] = startPos[1];
floatarray[2] = startPos[0]*0.999;
floatarray[3] = startPos[1]*0.99;

floatarray[4] = startPos[0];
floatarray[5] = startPos[1];
floatarray[6] = startPos[0]/0.999;
floatarray[7] = startPos[1]*0.99;

floatarray[8] = startPos[0]*0.999;
floatarray[9] = startPos[1]*0.99;
floatarray[10] = startPos[0]/0.999;
floatarray[11] = startPos[1]*0.99;

gl.uniform4fv(shaderProgram.colorUniform, ['1.0','0.0','0.0','1.0']);
gl.bufferData(gl.ARRAY_BUFFER, floatarray, gl.STATIC_DRAW);
gl.drawArrays(gl.LINES, 0, 6);

floatarray = new Float32Array(4);
floatarray[0] = startPos[0];
floatarray[1] = startPos[1];
floatarray[2] = endPos[0];
floatarray[3] = endPos[1];


gl.uniform4fv(shaderProgram.colorUniform, ['1.0','0.0','0.0','1.0']);
gl.bufferData(gl.ARRAY_BUFFER, floatarray, gl.STATIC_DRAW);
gl.drawArrays(gl.LINES, 0, 2);

如何进行动态旋转？...

我不会说英语。

请了解我的情况

Answer 1

您需要旋转所有点的点。

您可以通过手动旋转全部 JavaScript中的点

来执行此操作

const c = Math.cos(angleToRotateInRadians);
const s = Math.sin(angleToRotateInRadians);

rotatedPoint.x = originalPoint.x * c + originalPoint.y * s;
rotatedPoint.y = originalPoint.y * c - originalPoint.x * s;

或者您可以通过旋转着色器中的点来完成此操作。请注意，上面的代码围绕原点（0,0）旋转

在着色器中，您可以选择1000种不同的方式to rotate。

最常见的是using matrix math。使用矩阵数学的优点是它更灵活。 You can easily choose the rotation point