如何使 Three.js FOV 響應高度和寬度？

Question

背景

我使用視口單位調整所有內容的大小：

body {
  font-size: calc((1vw + 1vh) / 2);
}

h6 { 
  font-size: 1em;
}

div { 
  width: 20em;
}

隨着屏幕中像素數量的增加，單元的大小也會增加。 例如，1920 x 1080 顯示器的字體比 2560 x 1080 顯示器的字體小。 這允許在沒有媒體查詢的情況下自動支持超寬、垂直和高 DPI（8k 甚至 16K）顯示。

問題

使用 Three.js，對象縮放僅響應屏幕高度。 該對象在 1920x1080 顯示器上的顯示大小與在 2560x1080 顯示器上的大小相同。 這是因為 Three.js 相機使用垂直視野 (FOV)。

默認行為- 2560x1080 與 1080x1080 相比。 請注意，文本變小了，但 3D 對象的大小保持不變。 代碼筆示例

我的嘗試

Three.js 只響應高度的原因是因為它使用了一個垂直視角。 我嘗試使用我在 stackOverflow here上找到的這個公式將垂直 fov 更改為對角 fov。

var height = window.innerHeight;
var width = window.innerWidth;
var distance = 1000;
var diag = Math.sqrt((height*height)+(width*width))
var fov = 2 * Math.atan((diag) / (2 * distance)) * (180 / Math.PI);
camera = new THREE.PerspectiveCamera(fov , width / height, 1, distance * 2);
camera.position.set(0, 0, distance);

由此產生的行為與應該發生的行為相反。

• 在較小的屏幕上，對象變得更大。
• 在更大的屏幕上，對象變得更小。

當前結果

Three.js 中的對象只會在增加視口高度時變大。 我試圖將默認的垂直 fov 修改為對角線 fov。 然而，這並沒有奏效。

想要的結果

調整視口大小時，對象應根據公式（（視口高度 + 視口寬度）/ 2）更改感知大小。 這將確保放置在頁面上的文本與 3D 對象保持相同的相對比例。 我想通過改變相機而不是 3D 對象本身來實現這一點。

Answer 1

您應該根據屏幕的寬度或高度創建縮放比例。 例如：

SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;

if(SCREEN_WIDTH > {something} && SCREEN_WIDTH < {something}){
    camera.fov = SCREEN_WIDTH / {something}; //This is your scale ratio.
};

//Repeat for window.innerHeight or SCREEN_HEIGHT.

if(SCREEN_HEIGHT > {something} && SCREEN_HEIGHT < {something}){
    camera.fov = SCREEN_HEIGHT / {something}; //This is your scale ratio for height, it could be same as window.innerWidth if you wanted.
};

//Updating SCREEN_WIDTH and SCREEN_HEIGHT as window resizes.

window.addEventListener('resize', onResize, false); //When window is resized, call onResize() function.

function onResize() {
    SCREEN_WIDTH = window.innerWidth; //Re-declaring variables so they are updated based on current sizes.
    SCREEN_HEIGHT = window.innerHeight;

    camera.aspect = window.innerWidth / window.innerHeight; //Camera aspect ratio.
    camera.updateProjectionMatrix(); //Updating the display
    renderer.setSize(window.innerWidth, window.innerHeight) //Setting the renderer to the height and width of the window.
};

希望這可以幫助！ 如果您還有任何問題，請告訴我

-阿奈塔爾