如何使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对象的大小保持不变。 codepen example

我的尝试

Three.js只响应高度的原因是因为它使用了垂直视角。我试图使用我在stackOverflow here上找到的这个公式将vertical-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);

所产生的行为与应该发生的情况相反。

• 在较小的屏幕上，object becomes larger.
• 在更大的屏幕上object becomes smaller.

当前结果

Three.js中的对象仅在增加视口高度时才变大。我试图将默认的vertical-fov修改为对角线-fov。但是，这没有用。

所需结果

调整视口大小时，对象应根据公式（（视口高度+视口宽度）/ 2）更改感知的大小。这样可以确保页面上放置的文本与3D对象的相对比例保持不变。我想通过改变相机而不是3D对象本身来实现这一点。

Answer 1

您应该根据屏幕的宽度或高度创建缩放比例。例如：

set -e

希望这有帮助！如果您还有任何问题，请告诉我

-阿奈塔尔