根據寬度調整Three.js相機FOV

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垂直居中。當容器較寬時，這種對中不會明顯，但當容器較高時，會使其正確縮放。