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

Question

这个问题有点尴尬，但我真的找不到错误。 我在我的three.js环境中有一个顶点着色器。由于我会在很多对象上进行多次旋转，所以我认为我应该使用着色器来做到这一点。但旋转不正确。旋转是2D，y和z轴翻转，fyi。目前我正在旋转一个立方体。在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来说，这会恶化为一架飞机。

林definetly简单的东西在这里，但我不能弄明白。提前致谢。在第二行

Answer 1

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

您正在使用更新 x坐标，但你应该使用原 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); 
}