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。使用矩陣數學的優點是它更加靈活。 You can easily choose the rotation point。