Three.js：动态调整视口大小和缩放

Question

我有一个包含Three.js的UI，它有1个perspectiveCamera和3个OrthogonalCameras。我使用视口来渲染相机。所以我有四个地区。下图显示了我的情况。

我希望缩放或调整这些区域的大小。

我拥有的代码片段是：

function setCamera(x, y, z) {

Screen_Width = window.innerWidth, Screen_Height = window.innerHeight;
View_Angle = 45, ASPECT = Screen_Width / Screen_Height, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera(View_Angle, ASPECT, NEAR, FAR);
camera.position.set(x, y, z);
camera.lookAt(scene.position);
scene.add(camera);
}

function setOtherCameras() {

Screen_Width = window.innerWidth, Screen_Width = window.innerHeight;

topCamera = new THREE.OrthographicCamera(
            Screen_Width / -4, // Left
            Screen_Width / 4, // Right
            Screen_Width / 4, // Top
            Screen_Width / -4, // Bottom
            -5000, // Near 
            10000); // Far -- enough to see the skybox
topCamera.up = new THREE.Vector3(0, 0, -1);
topCamera.lookAt(new THREE.Vector3(0, -1, 0));
scene.add(topCamera);

frontCamera = new THREE.OrthographicCamera(
            Screen_Width / -4, Screen_Width / 4,
            Screen_Width / 4, Screen_Width / -4, -5000, 10000);
frontCamera.lookAt(new THREE.Vector3(0, 0, -1));
scene.add(frontCamera);

sideCamera = new THREE.OrthographicCamera(
            Screen_Width / -4, Screen_Width / 4,
            Screen_Width / 4, Screen_Width / -4, -5000, 10000);
sideCamera.lookAt(new THREE.Vector3(1, 0, 0));
scene.add(sideCamera);
}

function render() {
   updateGrid();
   updateImages();

   var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
   // setViewport parameters: lower_left_x, lower_left_y, viewport_width, viewport_height
   renderer.setViewport( 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
   renderer.clear();

   var left,bottom,width,height;
   var zoomValue = 1;

   renderCamera(1, //left
                 0.25 * SCREEN_HEIGHT + 1,  //bottom
                 SCREEN_WIDTH - 260, //width
                 SCREEN_HEIGHT - 1, //height
                 camera, zoomValue, false, true);

   // upper right corner
   renderCamera(1, //left
                 1, //bottom
                 1/3 * SCREEN_WIDTH - 260/3 - 1, //width
                 0.25 * SCREEN_HEIGHT - 1, //height
                 topCamera, zoomValue, true, true);

   // lower left corner
   renderCamera(1/3 * SCREEN_WIDTH - 260/3 + 1, //left
                 1, 1/3 * SCREEN_WIDTH - 260/3 - 1, //width
                 0.25 * SCREEN_HEIGHT - 1, //height
                 sideCamera, zoomValue, true, true);

   // lower right corner    
   renderCamera(2/3 * SCREEN_WIDTH - 2*260/3 + 1, //left
                 1, 1/3 * SCREEN_WIDTH - 260/3 - 1, //width
                 0.25 * SCREEN_HEIGHT - 1, //height
                 frontCamera, zoomValue, true, true);

}

function renderCamera(left, bottom, width, height, cam, zoomValue,     
    zooming, enableScissor) {
   renderer.setViewport(left,bottom,width,height);
   renderer.setScissor(left,bottom,width,height);
   renderer.enableScissorTest (enableScissor);
   cam.aspect = width/height;
   if (zooming) cam.zoom = zoomValue;
   cam.updateProjectionMatrix();
   renderer.render(scene, cam);  
}