Three.js

Question

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

// 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 值将平面实际移向相机，这样我就可以计算表面法线，然后通过法线与光线方向的对齐方式再次计算片段着色器中的光照 - 就像在光线行进。

Answer 1

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

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

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

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

Answer 2

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

我错误地认为相机的 field-of-value 在所有方向上都是相同的。但是 FOV 指的是 Y-Axis FOV，所以我们必须将 camera-fov 转换为 x-axis 也：

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。现在它捕捉到 window-width.

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

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

Three.js - Scaling a plane to full screen

javascript

shader

vector

glsl

编辑：