如何在窗口调整大小时防止在三个 js 中缩放对象？

【问题标题】：How can i prevent scaling object in three,js on window resize?如何在窗口调整大小时防止在三个 js 中缩放对象？
【发布时间】：2014-09-15 14:14:22
【问题描述】：

我想防止对象在窗口调整大小时缩放。当我调整窗口大小时，我找不到正在改变的值。更有趣的是，对象仅在我垂直调整窗口大小时才调整大小。

http://imgur.com/01vpTUQ

http://imgur.com/hLbWJIw

所以我的主要问题是：当我调整窗口大小时改变的值是什么。

【问题讨论】：

这与three.js 没有太大关系，而是与您如何定义 HTML5 画布元素有关。也许您应该将您的画布元素设置为固定大小？

标签： jquery three.js perspectivecamera

【解决方案1】：

要实现这一点，需要在窗口大小发生变化时更新摄像机的视野。这里有一个working example / fiddle 说明如何实现它，下面是计算新FOV 的sn-p。 original github issue.

// remember these initial values
var tanFOV = Math.tan( ( ( Math.PI / 180 ) * camera.fov / 2 ) );
var windowHeight = window.innerHeight;

$(window).on('resize', function ()
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.fov = (360 / Math.PI) * Math.atan(tanFOV * (window.innerHeight / windowHeight));
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
});

【讨论】：

这个解决方案中的“tanFOV”和“windowHeight”是什么？