Javascript Three.js将平面大小设置为全视图

我是日本人，英语不好，对不起

我正在学习Three.js

我想将平面设置为相机正前方的背景

我希望平面背景完全填满窗口（渲染器）

但现在是这样

飞机是蓝色的

它有点小

这是代码

函数init（）{
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
场景。添加（摄影机）；
摄像机位置x=0；
摄像机位置y=0；
摄像机位置z=100；
摄影机.注视（场景.位置）；//（0,0,0）
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（新的三种颜色（0xE3））；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（50,50,50）；
spotLight.castShadow=true；
场景。添加（聚光灯）；
//我想将平面的大小作为完整背景。而不是（82，82*window.innerHeight/window.innerWidth）
var planeGeometry=新的三个.planeGeometry（82,82*window.innerHeight/window.innerWidth）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0x123abc}）；
var plane=新的三个网格（平面几何体、平面材质）；
plane.receiveShadow=true；
平面位置x=0；
平面位置y=0；
平面位置z=0；
场景。添加（平面）；
var cubeGeometry=新的三盒几何体（4,4,4）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff0000}）；
var cube=新的三网格（立方计量法、立方材料）；
cube.position.x=2
立方体位置y=10
cube.position.z=2
cube.castShadow=true
场景.添加（立方体）；
document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）；
渲染器。渲染（场景、摄影机）；
}
window.onload=init
82.842是正确的，但透视相机的视野角度是y轴上的角度（垂直）。

要计算视野，必须使用。沿y轴的视野为

视场y=z*tan（角度/2）*2

将其应用于您的代码：

让ang_rad=45.0*Math.PI/180；
设fov_y=100*Math.tan（ang_rad/2）*2；
变量平面几何=
新的三个平面几何图形（fov_y*window.innerWidth/window.innerHeight，fov_y）；

分别

让ang_rad=camera.fov*Math.PI/180；
设fov_y=camera.position.z*Math.tan（ang_rad/2）*2；
var planeGeometry=新的三个平面几何体（fov_y*camera.aspect，fov_y）；

通过检索焦距（）和胶片高度（），可以简化计算：

let fov_y=camera.position.z*camera.getFilmHeight（）/camera.getFocalLength（）；
var planeGeometry=新的三个平面几何体（fov_y*camera.aspect，fov_y）；

---

函数init（）{
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
场景。添加（摄影机）；
摄像机位置x=0；
摄像机位置y=0；
摄像机位置z=100；
摄影机.注视（场景.位置）；//（0,0,0）
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（新的三种颜色（0xE3））；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（50,50,50）；
spotLight.castShadow=true；
场景。添加（聚光灯）；
//我想将平面的大小作为完整背景。而不是（82，82*window.innerHeight/window.innerWidth）
设ang_rad=camera.fov*Math.PI/180；
设fov_y=camera.position.z*Math.tan（ang_rad/2）*2；
var planeGeometry=新的三个平面几何体（fov_y*camera.aspect，fov_y）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0x123abc}）；
var plane=新的三个网格（平面几何体、平面材质）；
plane.receiveShadow=true；
平面位置x=0；
平面位置y=0；
平面位置z=0；
场景。添加（平面）；
var cubeGeometry=新的三盒几何体（4,4,4）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff0000}）；
var cube=新的三网格（立方计量法、立方材料）；
cube.position.x=2
立方体位置y=10
cube.position.z=2
cube.castShadow=true
场景.添加（立方体）；
document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）；
渲染器。渲染（场景、摄影机）；
}
window.onload=init
#
哦，天哪。你太棒了。非常感谢。
“但是透视相机的视场角度是y轴（垂直方向）上的角度”
我不知道，非常感谢。
让fov_y=100*Math.tan（ang_rad/2）*2
这样做的原因是，将三角形切成一半，然后通过tan得到半个三角形的高度并将其加倍，写？@Akao Yes，半个三角形是一个三角形。切线（乘以Z）给出了半高。谢谢！你救了我一天