webGL：沿Y轴围绕点旋转矩形
假设我有一个矩形，有4个顶点x1，y1，x2，y2，x3，y3和x4，y4。这些顶点按顺时针顺序排列。矩形的方向类似于x1，y1是最左上角，x3，y3是最右下角 现在，我想沿着包含x2、y2和x3、y3的边围绕其中一条边i、e旋转矩形。我想通过旋转两个顶点x1、y1和x4、y4在着色器中实现此效果 我的问题是，旋转一个点x1，y1的公式是什么，旋转角度θ围绕某一点 我搜索了老论坛，找到了一些相关信息webGL：沿Y轴围绕点旋转矩形,webgl,Webgl,假设我有一个矩形，有4个顶点x1，y1，x2，y2，x3，y3和x4，y4。这些顶点按顺时针顺序排列。矩形的方向类似于x1，y1是最左上角，x3，y3是最右下角 现在，我想沿着包含x2、y2和x3、y3的边围绕其中一条边i、e旋转矩形。我想通过旋转两个顶点x1、y1和x4、y4在着色器中实现此效果 我的问题是，旋转一个点x1，y1的公式是什么，旋转角度θ围绕某一点 我搜索了老论坛，找到了一些相关信息 我的问题是我能不能用这个等式。。因为它类似于绕Y轴旋转。基本上是围绕向量旋转对象，需要平移并旋
我的问题是我能不能用这个等式。。因为它类似于绕Y轴旋转。基本上是围绕向量旋转对象，需要平移并旋转它，如果需要，该向量将显示在中间，因此对象将定位在向量局部坐标系中。然后应用旋转，然后将对象放回原来的位置。是图书馆的好帮手 基本上，要围绕矢量旋转对象，需要平移并旋转（如果需要），使该矢量显示在中间，以便将对象定位在矢量局部坐标系中。然后应用旋转，然后将对象放回原来的位置。是图书馆的好帮手 这里有一系列文章讨论了2D旋转的数学问题 它的开始很简单，并建立了二维矩阵数学，这是最常见的方式做这件事 一旦你有了矩阵，你就可以生成一个矩阵来平移矩形，这样X2，y2和x3，y3之间的点就是0,0。然后生成一个旋转的矩阵。然后再翻译回来。把它们都乘在一起，你会得到一个矩阵，完成整个过程
// Compute the matrices
var rotatePointX = (x2 + x3) / 2;
var rotatePointY = (y2 + y3) / 2;
var moveToRotationPointMatrix = makeTranslation(-rotatePointX, -rotatePointY);
var rotationMatrix = makeRotation(angleInRadians);
var moveBackMatrix = makeTranslation(rotatePointX, rotatePointY);
// Multiply the matrices.
var matrix = matrixMultiply(moveToRotationPointMatrix, rotationMatrix);
matrix = matrixMultiply(matrix, moveBackMatrix);
...
这里有一系列关于二维旋转的文章 它的开始很简单，并建立了二维矩阵数学，这是最常见的方式做这件事 一旦你有了矩阵，你就可以生成一个矩阵来平移矩形，这样X2，y2和x3，y3之间的点就是0,0。然后生成一个旋转的矩阵。然后再翻译回来。把它们都乘在一起，你会得到一个矩阵，完成整个过程
// Compute the matrices
var rotatePointX = (x2 + x3) / 2;
var rotatePointY = (y2 + y3) / 2;
var moveToRotationPointMatrix = makeTranslation(-rotatePointX, -rotatePointY);
var rotationMatrix = makeRotation(angleInRadians);
var moveBackMatrix = makeTranslation(rotatePointX, rotatePointY);
// Multiply the matrices.
var matrix = matrixMultiply(moveToRotationPointMatrix, rotationMatrix);
matrix = matrixMultiply(matrix, moveBackMatrix);
...