Question

以下标准Three.js调整大小代码将场景与DOM元素的高度相关联。如果元素高度减小，则场景按比例缩放以使模型保持在视图中。但是，当元素的宽度减小时，场景不会缩放，并且模型会被元素裁剪。如何使用元素宽度的场景比例和高度一样？

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

Answer 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中垂直居中。当容器较宽时，这种定心不会引人注意，但当容器较高时会使其正确缩放。

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

1 个答案: