如何使Three.js视场响应高度和宽度？

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相机使用垂直视场。

默认行为- 2560x1080，而不是1080x1080。注意，文本变小了，但是3D对象保持相同的大小。代码示例

​

​

我的尝试

Three.js之所以只响应高度，是因为它使用垂直的fov。我试图使用我在stackOverflow 这里上找到的公式将垂直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。然而，这是行不通的。

期望的结果

当视口调整大小时，对象应根据公式((viewport高度+视口宽度)/ 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.
};

希望这能有所帮助！如果你还有什么问题请告诉我

-Anayttal