javascript - Three.js - 使用平面几何占用所有可用空间（模拟 background-size:cover 属性）

Question

我想构建一个包含大平面几何图形的 three.js 场景，无论视口的纵横比如何，它都应该占据所有可用空间。

我做了一个粗略的小提琴来突出这个问题：https ://jsfiddle.net/nq2oy9ca/1/

使用以下调整大小功能：

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight); 
});

仅当视口的 y 轴发生变化时，图像才会缩放 - 它不会对 x 轴上的变化做出反应。

这意味着只有当视口的纵横比很窄时它才会占用所有空间：如果纵横比变得足够宽，则背景将在左侧和右侧可见。

删除该功能可以防止图像被调整大小。

我认为可以通过在调整视口大小时动态更新相机距离（ camera.position.z ）来实现结果，但我不知道该值与视口 \ 画布大小的关系如何。

任何反馈将不胜感激，在此先感谢！

标签： javascriptthree.js