三个JS正交相机:调整场景到窗口的大小

时间:2012-06-23 15:59:56

标签: webgl three.js

在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中关闭透视图?

谢谢!

1 个答案:

答案 0 :(得分:8)

我不确定这是否会对您的特定问题有所帮助。我不确定这是否正确,或者是否有更好或更标准的方法来处理这个问题。但到目前为止,这是我在正交码中使用的内容。它无论如何都不能完美,但你可以尝试一下。回过头来告诉我你是否能找到更好的东西。

        $(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();
        });