Three.js 平移网格时立方体贴图会扭曲

尝试使用cubemap着色器（如示例中所示）创建skybox时，注意到在转换网格时出现了扭曲

如果创建一个宽度、高度和深度均为一维的立方体。将侧面设置为3。背面和深边设置为false。然后在x、y和z字段中缩放网格，使其达到1000个单位

当网格位于世界中心时，一切都很好。但是，一旦你平移网格，立方体贴图就开始严重扭曲

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

我使用的着色器代码如下所示：

'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")

}

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

---

非常感谢

在做了一些研究之后，我发现Skybox的立方体贴图着色器依赖于相机处于世界中心。因此，为了在我上面描述的场景中实现这一点，我没有将skybox的位置设置为摄影机，而是将摄影机的世界位置设置为0

在渲染skybox之前，您需要执行以下操作：

// 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;