在Threejs中使用顶点着色器旋转几何

Question

我正在尝试使用顶点着色器旋转一个盒子，但是由于我不知道原因，它被剪断了，下面是代码，请帮助我。这是小提琴和我的顶点着色器代码

uniform float delta;
void main()
{
    vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = (projectionMatrix * modelViewPosition);
     float new_x = gl_Position.x*cos(delta) - gl_Position.y*sin(delta);
     float new_y = gl_Position.y*cos(delta) + gl_Position.x*sin(delta);
     gl_Position.x = new_x;
     gl_Position.y = new_y;
}

https://jsfiddle.net/co4vbhye/

Answer 1

如果视口为矩形，则将通过投影矩阵对其进行补偿。这意味着必须应用于顶点坐标的最后一个变换是投影矩阵：

clip_position = projection * view * model * position

您必须将旋转应用于顶点坐标position。之后，通过视图矩阵和投影矩阵转换结果：

uniform float delta;
void main()
{
    vec3 p = position.xyz;
    float new_x = p.x*cos(delta) - p.y*sin(delta);
    float new_y = p.y*cos(delta) + p.x*sin(delta);

    gl_Position = projectionMatrix * modelViewMatrix * vec4(new_x, new_y, p.z, 1.0);
}