根据宽度调整 Three.js 相机 FOV

【问题标题】：Adjust Three.js camera FOV based on width根据宽度调整 Three.js 相机 FOV
【发布时间】：2017-10-17 17:40:33
【问题描述】：

下面的标准 Three.js 调整大小代码根据 DOM 元素的高度缩放场景。如果元素高度降低，则场景按比例缩放以保持模型在视图中。但是，当元素的宽度减小时，场景不会缩放，并且模型会被元素裁剪。我怎样才能让场景缩放与元素的宽度一样，就像它与高度一样？

window.onresize = function(event) {
    camera.aspect = $(threeContainer).width() / $(threeContainer).height();
    camera.updateProjectionMatrix();
    renderer.setSize($(threeContainer).width(), $(threeContainer).height());
};

【问题讨论】：

标签： javascript three.js

【解决方案1】：

最简单的方法是伪造它。

您需要根据容器的纵横比设置画布大小。考虑以下纵横比：

W = 800，H = 600，AR = 4/3 = 1.333
W = 500，H = 500，AR = 1
W = 600，H = 800，AR = 3/4 = 0.75

因此，如果您的纵横比小于 1，则需要调整画布的高度以补偿它是垂直 FOV 的事实。

if(w/h < 1){
    renderer.setSize($(threeContainer).width(), $(threeContainer).height() * (w/h));
}

您还需要对renderer.domElement 应用样式以使其在threeContainer 中垂直居中。当容器较宽时，这种居中不会很明显，但当容器较高时，它会呈现正确缩放的外观。

【讨论】：