Javascript 根据宽度调整Three.js摄像机视野

下面的标准Three.js resize代码根据DOM元素的高度缩放场景。如果元素高度降低，则场景将按比例缩放以保持模型在视图中。但是，当元素的宽度减小时，场景不会缩放，模型会被元素裁剪。如何使场景缩放与元素的宽度一样，与高度一样

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

---

最简单的方法就是假装

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

• 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，则需要调整画布的高度以补偿垂直视场的事实

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

if（w/h<1）{
renderer.setSize（$（threeContainer.width（），$（threeContainer.height（）*（w/h））；
}

您还需要将样式应用于

renderer.domeElement

，以使其在

threeContainer

中垂直居中。当容器较宽时，这种居中不会明显，但当容器较高时，会使其具有正确缩放的外观