【问题标题】:ThreeJS orthographic camera: Adjusting size of scene to windowThreeJS正交相机:将场景的大小调整为窗口
【发布时间】:2012-06-23 15:59:55
【问题描述】:

在 ThreeJS 中,我使用的是 OrthographicCamera,因为我有几个对象应该从前面显示,没有任何透视失真。这适用于一个问题:我创建的一堆对象应该总是大致填满屏幕,但不能太小或太大。使用例如

var factor = 4.5;
this.camera = new THREE.OrthographicCamera(-window.innerWidth / factor, window.innerWidth / factor, window.innerHeight / factor, -window.innerHeight / factor, 1, 1000);

...我可以让它在 1920x1080 像素分辨率下正常运行,但是当我将窗口大小调整为更小并重新加载页面时,对象将开始变得太大,因为它们的行为就好像它们是固定的. (当使用带透视的 CombinedCamera 时,调整大小是动态的并且效果很好。)如何使用 OrthographicCamera 解决这个问题?或者有什么技巧可以让我在 CombinedCamera 中关闭透视?

谢谢!

【问题讨论】:

  • 我现在也有同样的问题。你有想过这个吗?

标签: webgl three.js


【解决方案1】:

我不确定这是否有助于解决您的特定问题。我不确定这是否正确,或者是否有更好或更标准的方法来处理这个问题。但到目前为止,这是我在正交代码中使用的。它无论如何都不是完美的,但你可以尝试一下。如果您有更好的办法,请回复并告诉我。

        $(window).on('resize', function () {
            // notify the renderer of the size change
            renderer.setSize(window.innerWidth, window.innerHeight);
            // update the camera
            camera.left = -window.innerWidth / camFactor;
            camera.right = window.innerWidth / camFactor;
            camera.top = window.innerHeight / camFactor;
            camera.bottom = -window.innerHeight / camFactor;
            camera.updateProjectionMatrix();
        });

【讨论】:

  • 所以我猜只是创建新实例?
  • camFactor 是什么?
  • @AlexLenail 可以说是“缩放”。它控制相机截锥体的大小。较小的数字意味着更窄的“视野”,因此看起来会放大。(因为您无法通过移动正交相机来放大)。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-07-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多