Three.js - 将平面缩放到全屏答案

【问题标题】：Three.js - Scaling a plane to full screenThree.js - 将平面缩放到全屏
【发布时间】：2020-12-31 11:49:42
【问题描述】：

我正在向场景中添加这样的飞机：

// 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 轴以及我需要如何转换它，所以平面将填充视口宽度而不是高度？

编辑：

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

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

【问题讨论】：

this.uniforms.uZMax = ...，看来必须是this.uniforms.uZMax.value = ...
确实，如果你不使用new THREE.Uniform 构造函数，那是真的。但是三个统一类负责添加具有正确参数的对象
啊，真的 :) 我的错

标签： javascript vector three.js glsl shader

【解决方案1】：

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

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

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

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

【讨论】：

谢谢，但我实际上是在尝试用平面替换单击的图像，然后将其缩放到全屏以获得网格到全屏的效果。不过，我可能会尝试使用正交方法进行某种翻转。我仍然有兴趣找出如何将数学引用到 x 轴。有什么想法吗？

【解决方案2】：

我想通了，怀疑它与传递给相机的纵横比有关。对于在我之后寻找解决方案的任何人，它的工作原理如下：

我错误地认为相机的值域在所有方向上都是相同的。但是 FOV 指的是 Y 轴 FOV，所以我们还必须将 camera-fov 转换为 x 轴：

function getXFOV() {
        // Convert angle to radiant
        const FOV = this.three.camera.fov;
        let yFovRadiant = FOV * Math.PI/180;
        // Calculate X-FOV Radiant
        let xFovRadiant = 2 * Math.atan( Math.tan(yFovRadiant/2) * (window.innerWidth / window.innerHeight));
        // Convert back to angle
        let xFovAngle = xFovRadiant * 180/Math.PI;
        return xFovAngle;

}

然后我们只需在closeZ-计算中使用该角度而不是相机的fov。现在它捕捉到窗口宽度。

const closeZ = 0.5 / Math.tan((this.getXFOV()) * Math.PI / 180.0);
this.uniforms.uZMax = new THREE.Uniform(this.three.camera.position.z - closeZ);

【讨论】：