背景

我使用视口单位调整所有内容的大小：

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 …