Three.js - 将飞机缩放至全屏

我将一架飞机添加到场景中，如下所示：

// Camera
this.three.camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 60);
// Plane
const planeGeometry = new THREE.PlaneBufferGeometry(1,1,this.options.planeSegments,this.options.planeSegments);
const planeMat = new THREE.ShaderMaterial( ... )
this.three.plane = new THREE.Mesh(planeGeometry,planeMat);
this.three.scene.add(this.three.plane);

非常基本。我试图找出如何在 Z 轴上移动平面才能填充浏览器视口。为了那个原因，

// See attachment "solving for this" is closeZ
const closeZ = 0.5 / Math.tan((this.three.camera.fov/2.0) * Math.PI / 180.0);
this.uniforms.uZMax = new THREE.Uniform(this.three.camera.position.z - closeZ);

所以现在我知道在我的着色器中可以向 Z 添加多少以使平面填充视口。顶点着色器看起来像这样：

uniform float uZMax;

void main() {   
    vec3 pos = (position.xy, uZMax);
    gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1 );
}

这实际上会缩放平面以填充视口，但缩放的是 Y 轴，而不是 X 轴。

我想知道为什么我的数学涉及 Y 轴以及我需要如何转换它，以便平面将填充视口宽度而不是高度？

Edit:

我正在努力实现这样的目标https://tympanus.net/Tutorials/GridToFullscreenAnimations/index4.html https://tympanus.net/Tutorials/GridToFullscreenAnimations/index4.html- 但在给定的示例中，他们只是缩放 x 和 y 像素以填充屏幕，因此没有实际的 3d - 因此再次没有照明。

我实际上想使用不同的 z 值将平面移向相机，这样我就可以计算表面法线，然后通过法线与光线方向的对齐方式再次计算片段着色器中的光照 - 就像在光线行进中所做的那样。

您可以通过使用以下设置轻松实现这样的全屏效果：

const camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );

const geometry = new THREE.PlaneBufferGeometry( 2, 2 );

当使用此几何体和自定义着色器材质创建网格时，正交相机将确保预期的全屏效果。这种方法用于所有后处理示例，其中整个视口必须用单个四边形填充。