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

您需要旋转所有点。

您可以通过手动旋转 ALL 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)

旋转

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

最常见的是 using matrix math. The advantage of using matrix math is it's far more flexible. You can easily choose the rotation point。

webgl三角形随鼠标位置旋转

webgl triangle rotate with mouse position

javascript

webgl