Three.js 着色器中的旋转（WebGL 着色器）

Question

这个问题有点尴尬，但老实说我找不到错误。 我的three.js 环境中有一个顶点着色器。由于我将及时对许多对象进行多次旋转，因此我认为我应该使用着色器来执行此操作。但是旋转没有正确执行。旋转是 2D 并且 y 和 z 轴被翻转，仅供参考。目前我正在旋转一个立方体。在 PI/2（90 度），我只是得到一个平面，其中 2 个点相互匹配。

跟随顶点着色器。 cos 和 sin 是预先计算的相同角度的值。

<script id="railbarVertexShader" type="x-shader/x-vertex">
    uniform float p1x;
    uniform float p1y;
    uniform float p1z;
    uniform float height;
    uniform float width;
    uniform float depth;
    uniform float sin;
    uniform float cos;

    varying vec2 vUv;
    varying vec3 vPosition;

    void main( void ) {
        vUv = uv;
        vPosition = position;

        //Scale
        vPosition.x *= width;
        vPosition.y *= height;
        vPosition.z *= depth;
        //Rotation + Position
        vPosition.y = vPosition.y+p1z;
        vPosition.x = (vPosition.x*cos)-(vPosition.z*sin)+p1x;
        vPosition.z = (vPosition.z*cos)+(vPosition.x*sin)+p1y;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1);

    }

</script>

下图是 PI/4 的旋转。您已经可以看到它不再是二次方了。对于 PI/2，这会恶化到平面。

我在这里肯定遗漏了一些简单的东西，但我想不通。提前致谢。

Answer 1

    vPosition.x = (vPosition.x*cos)-(vPosition.z*sin)+p1x;
    vPosition.z = (vPosition.z*cos)+(vPosition.x*sin)+p1y;

您在第二行使用的是 更新的 x 坐标，但您应该使用 original x 坐标（缩放后）。我认为代码应该是这样的：

void main(void)
{
    vUv = uv;

    // Scale
    float scaledX = position.x * width;
    float scaledY = position.y * height;
    float scaledZ = position.z * depth;

    // Rotation + Position
    vPosition.y = scaledY + p1z;
    vPosition.x = scaledX * cos - scaledZ * sin + p1x;
    vPosition.z = scaledZ * cos + scaledX * sin + p1y;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1);
}