使用 onWindowResize() 函数在窗口大小更改时按比例更改几何图形的大小

我正在使用 javascript 进行编码。我制作了一些课程，现在我正在使用 Three.js 探索 webgl 世界

我正在尝试这个函数，该函数在 Threes.org 的所有示例中都非常常用：

        function onWindowResize() {

          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();

          renderer.setSize(window.innerWidth, window.innerHeight);

        }

通过此功能，当我减少或增加浏览器窗口的宽度时，我可以使几何图形居中，当我减少或增加浏览器窗口的高度时，我可以使几何图形变小或变大。

但现在的问题是，当我降低窗口的高度时，我可以看到我的几何图形，因为它居中且较小。但是当我减小窗口的宽度时，我看不到所有的几何图形，因为它居中但不更小。

在这个例子中：http://codepen.io/gnazoa/pen/BjoBZz http://codepen.io/gnazoa/pen/BjoBZz我试图使用避免这个问题object.scale.devideScalar(1.5); in my onWindowResize()功能，但并没有改变。

我正在为此寻找解决方案，因为我认为这对于正确的体验非常重要，因为目前，我在桌面屏幕上看到了这个几何图形：

我的 iPhone 中这个不完整的几何图形：

你有什么建议吗？这个问题有办法解决吗？

欢迎来到 js/Three.js 的世界！感谢您整理了小提琴。这是我建议的解决方案 http://codepen.io/erik0077/pen/LNrjGo.

1) 不幸的是，第 44 行有一个拼写错误

object.scale.devideScalar(1.5);

应该

object.scale.divideScalar(1.5);

在浏览器中使用 javascript 时，打开您的开发工具（chrome https://developer.chrome.com/devtools/docs/javascript-debugging, firefox https://developer.mozilla.org/en-US/docs/Tools/Debugger，或您选择的浏览器）。它会抛出类似的东西：

Uncaught TypeError: object.scale.devideScalar is not a function

2）解决这个问题，你仍然有问题。您编写的这一行通过将规模缩小 66% 来变异（更改） Three.js 立方体every调用 onWindowResize()。正如您所想象的，0.66^many 很快就会变为零，立方体就会消失。真糟糕。

我认为你想要的是对象的比例与屏幕的比例相匹配。因此，无论启动或调整屏幕大小，立方体始终占据 div 的大约 50%（或其他）。

首先，简要解释一下为什么您的场景似乎在垂直方向而不是水平方向上调整大小。这Three.js 透视相机 http://threejs.org/docs/api/cameras/PerspectiveCamera.htmlfov（视野，即相机收集到渲染中的视角）取决于垂直空间。当您更新相机的可用空间时，相机会进行调整以将场景保持在相同的视场中。你可以在你的“高”手机上看到这一点；立方体在垂直空间中的表观高度相同，但侧面被切掉。

这会导致一个问题。可以像您注释掉的那样弄乱对象的比例：

object.scale.set(factor, factor, factor);

这可以让事物保持一致，但是当你有多个立方体或者你开始变换你的对象时（比例到处都是），就会变得笨拙。渲染器无法按照您建议的方式拉伸而不扭曲 3d 投影。这样想：如果你有一个立方体，该立方体可以扭曲地填充任何屏幕吗？矩形屏幕可能会出现：空白区域、被切掉的立方体或扭曲比例。

我还假设最终目标不仅仅是一个矩形（您可以使用任意数量的 2d javascript 或 css 解决方案来模拟它，同时减少 CPU 和头痛时间）。

So, 我的激进解决方案 http://codepen.io/erik0077/pen/LNrjGo请勿调整画布大小以完全填充容器。修改后的示例将内容放入部分填充窗口的包含 div 中。根据您的喜好更改 css。填充窗口的一种方法是：

width: 100%;
height: 100vh;

无论如何，通过调整画布来调整预览窗口和我的代码的大小。我将此比例设置为 16:9（普通电视），但您也可以根据需要更改它。容器本身是紫色的，渲染画布是浅蓝色的，立方体是蓝色的。真正的新代码是：

var targetAspectRatio = 16 / 9; //cinematic!
function aspectSize(availableWidth, availableHeight) {
  var currentRatio = availableWidth / availableHeight;
  if (currentRatio > targetAspectRatio) {
    //then the height is the limiting factor
    return {
      width: availableHeight * targetAspectRatio,
      height: availableHeight
    };
  } else {
    // the width is the limiting factor
    return {
      width: availableWidth,
      height: availableWidth / targetAspectRatio
    };
  }
}

本质上，任何大小超过 0 的矩形要么不够宽，要么不够高。在有限的尺寸中占用尽可能多的空间，而不是仅使用在其他尺寸中保持纵横比的空间。

还有一些黑线 (68:69) 将渲染器置于容器的中心。如果容器是窗口，则渲染器将位于该窗口的中心。

我希望这对您有所帮助并祝您工作顺利。