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

Question

我是日本人，英语不好，抱歉。

我正在学习 Three.js。

我想将飞机设置为相机前面的背景。

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

但现在却是这样了。

飞机是蓝色的。

它有点小。

这是代码。

function init() {
    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    scene.add(camera);

    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 100;
    camera.lookAt(scene.position); // (0, 0, 0)

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xe3e3e3));
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(50, 50, 50);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // I want to put Plane's size as full background. not (82, 82 * window.innerHeight / window.innerWidth)
    var planeGeometry = new THREE.PlaneGeometry(82, 82 * window.innerHeight / window.innerWidth);
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0x123abc});
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    scene.add(plane);

    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = 2
    cube.position.y = 10
    cube.position.z = 2

    cube.castShadow = true

    scene.add(cube);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    renderer.render(scene, camera);
}
window.onload = init;

<script src="https://rawcdn.githack.com/mrdoob/three.js/r113/build/three.js"></script>
<div id="WebGL-output"></div>

我想使用飞机作为窗口的完全填充背景。

我的相机位置是

camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;

所以它是从完美的正面观看所见。

我将 Plane 的宽度样本设置为 82 的原因是这样的

我设置了camera.position.z = 100;fov 为 45 度。

所以我想如果你像图像一样制作一个三角形并计算，(0,0,0)的全宽度应该是这样的。

我从一些可以根据形状和度数计算三角形的网站上得到 82.842...。

Answer 1

82.842是正确的，但视场角PerspectiveCamera是y轴（垂直）上的角度。
要计算视野，您必须使用切线 ( tan)。沿 y 轴的视野为

fov_y = z * tan(angle / 2) * 2

将其应用到您的代码中：

let ang_rad = 45.0 * Math.PI / 180;
let fov_y = 100 * Math.tan(ang_rad / 2) * 2;
var planeGeometry = 
    new THREE.PlaneGeometry(fov_y * window.innerWidth / window.innerHeight, fov_y);

分别

let ang_rad = camera.fov * Math.PI / 180;
let fov_y = camera.position.z * Math.tan(ang_rad / 2) * 2;
var planeGeometry = new THREE.PlaneGeometry(fov_y * camera.aspect, fov_y);

您可以通过检索焦距 ( .getFocalLength ()) 和胶片高度 ( .getFilmHeight()) 来简化计算：

let fov_y = camera.position.z * camera.getFilmHeight() / camera.getFocalLength();
var planeGeometry = new THREE.PlaneGeometry(fov_y * camera.aspect, fov_y);

function init() {
    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    scene.add(camera);

    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 100;
    camera.lookAt(scene.position); // (0, 0, 0)

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xe3e3e3));
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(50, 50, 50);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // I want to put Plane's size as full background. not (82, 82 * window.innerHeight / window.innerWidth)
    let ang_rad = camera.fov * Math.PI / 180;
    let fov_y = camera.position.z * Math.tan(ang_rad / 2) * 2;
    var planeGeometry = new THREE.PlaneGeometry(fov_y * camera.aspect, fov_y);
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0x123abc});
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    scene.add(plane);

    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = 2
    cube.position.y = 10
    cube.position.z = 2

    cube.castShadow = true

    scene.add(cube);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    renderer.render(scene, camera);
}
window.onload = init;

<script src="https://rawcdn.githack.com/mrdoob/three.js/r113/build/three.js"></script>#
<div id="WebGL-output"></div>