如何解决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);
所以现在我知道在着色器中可以添加多少以使平面填充视口。顶点着色器看起来像这样:
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值实际将平面移向摄影机,因此我可以计算表面法线,然后通过法线与光方向的对齐方式再次计算片段着色器中的光照-就像在光线渐变中所做的那样。
解决方法
通过使用以下设置,您可以轻松实现这种全屏效果:
const camera = new THREE.OrthographicCamera( - 1,1,- 1,1 );
const geometry = new THREE.PlaneBufferGeometry( 2,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(radVertFOV/2) * (window.innerWidth / window.innerHeight));
// Convert back to angle
let xFovAngle = xFovRadiant * 180/Math.PI;
return xFovAngle;
}
然后我们仅在closeZ
计算中使用该角度,而不是相机的视野。现在,它会捕捉到窗口宽度。
const closeZ = 0.5 / Math.tan((this.getXFOV()) * Math.PI / 180.0);
this.uniforms.uZMax = new THREE.Uniform(this.three.camera.position.z - closeZ);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。