转换网格时，立方体贴图会扭曲

Question

尝试使用立方体贴图着色器创建天空盒（如示例中所示），并在转换网格时发现失真。

如果您创建一个1维宽度，高度和深度的立方体。将边设置为THREE.BackSide和depthWrite为false。然后将网格缩放为x，y和z字段中的1000个单位。

当网格位于世界的中心时，一切都很好。但是一旦你翻译了网格，立方体贴图开始变形很严重。

您可能希望将网格移动到与摄像机相同的位置，从而在用户四处走动时不会允许天空盒达到其极限。

我正在使用的着色器代码是：

'cube': {

    uniforms: { "tCube": { type: "t", value: null },
                "tFlip": { type: "f", value: -1 } },

    vertexShader: [

        "varying vec3 vWorldPosition;",

        "void main() {",

            "vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
            "vWorldPosition = worldPosition.xyz;",

            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        "}"

    ].join("\n"),

    fragmentShader: [

        "uniform samplerCube tCube;",
        "uniform float tFlip;",

        "varying vec3 vWorldPosition;",

        "void main() {",

            "gl_FragColor = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );",

        "}"

    ].join("\n")

}

有没有人知道是否可以修改着色器以防止这种失真？

非常感谢！

Answer 1

在做了一些研究后，我发现天空盒的立方体贴图着色器依赖于摄像机位于世界的中心。因此，要在上面描述的场景中使用它，而不是将天空盒的位置设置到摄像机，我只需将摄像机的世界位置设置为0。

在渲染天空盒之前，你需要这样做：

// Get the current position
this._prevCamPos.getPositionFromMatrix( camera.matrixWorldInverse );

// Now set the position of the camera to be 0,0,0
camera.matrixWorldInverse.elements[12] = 0;
camera.matrixWorldInverse.elements[13] = 0;
camera.matrixWorldInverse.elements[14] = 0;

然后在渲染之后它需要返回：

// Now revert the camera back
camera.matrixWorldInverse.elements[12] = this._prevCamPos.x;
camera.matrixWorldInverse.elements[13] = this._prevCamPos.y;
camera.matrixWorldInverse.elements[14] = this._prevCamPos.z;