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); 
}