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

Question

我正在迈出使用 JavaScript 编写代码的第一步。我制作了一些类(class)，现在我正在使用 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我试图在我的 onWindowResize() 函数中使用 object.scale.devideScalar(1.5); 来避免这个问题，但它没有做出任何改变。

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

我的 iphone 中的这个不完整的几何图形:

你有什么建议吗？这个问题有可能解决吗？

Answer 1

欢迎来到 js/Three.js 的世界!并感谢您将 fiddle 放在一起。这是 my suggested solution .

1) 你在第 44 行有一个不幸的拼写错误

object.scale.devideScalar(1.5);

应该是

object.scale.divideScalar(1.5);

在浏览器中使用 javascript 时，打开您的开发工具( chrome 、 firefox 或您选择的浏览器)。它会抛出类似的东西:

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

2) 修复它，你仍然有问题。您所写的行通过每次 调用 onWindowResize() 将比例减小 66% 来改变(更改)three.js 多维数据集。正如您想象的那样，0.66^many 很快变为零并且立方体消失了。真可惜。

我想你想要的是对象的比例来匹配屏幕的比例。因此，无论起始屏幕还是调整大小的屏幕，立方体总是占据大约 50%(或其他)的 div。

首先，简要说明为什么您的场景似乎在垂直方向而不是水平方向调整大小。 three.js perspective camera fov(视野，即摄像机收集到渲染中的视角)取决于垂直空间。当您更新相机的可用空间时，相机会进行调整以将场景保持在相同的视野中。您可以在“高”电话中看到这一点；立方体的表观高度在垂直空间中是相同的，但边被切掉了。

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

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

这可以让事情保持一致，但是当你有多个立方体或者你开始变换你的对象时会变得笨拙(到处都是刻度)。在不扭曲 3d 投影的情况下，无法按照您建议的方式拉伸(stretch)渲染器。这样想:如果你有一个立方体，这个立方体是否可以在扭曲的情况下填满任何屏幕？矩形屏幕将具有:空白空间、切割立方体或扭曲比例。

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

所以，my radical solution没有调整 Canvas 大小以完全填满容器。修改后的示例将内容放在部分填充窗口的包含 div 中。根据自己的喜好更改 css。填充窗口的一种方法是:

width: 100%;
height: 100vh;

无论如何，通过调整 Canvas 调整预览窗口和我的代码的大小。我将此比例设置为 16:9(普通电视)，但您也可以随意更改。容器本身是紫色的，渲染 Canvas 是浅蓝色的，立方体是蓝色的。真正的新代码是:

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) 使渲染器在容器中居中。如果容器是窗口，渲染器将居中。

希望对您有所帮助，祝您工作顺利。