Three.js：从 Rev 82 到 Rev 89 的视口错位

Question

使用 three.js Rev 82，我的实验性飞行模拟器应用程序显示了这个显示（按需要显示并支持对象拾取）：-

当我将应用程序更改为使用 three.js Rev 89 时，执行错误（令人高兴地）为零，但它产生了这种显示（这是错误的，因为错位的视口和随之而来的对象拾取失败）：-

该应用程序使用五 (5) 个矩形视口来呈现图形数据：- (1) 一个覆盖整个屏幕的底层视口，带有扁平的黑色和蓝色矩形； (3) 三个中层视口从左到右排列，显示外部世界的视图； (1) 带有文本框、键盘和按钮的叠加“控制面板”视口。

从 Rev 82 到 Rev 89，中层和上层视口的垂直位置发生了变化。例如，三个“中层”视口已经从屏幕的上部移到了下部。并且“控制面板”视口（应该位于屏幕底部）已移至屏幕顶部附近。

我查看了Migration Summary，但看不到任何相关更改。看着Renderer documentation，我并没有什么明显的反应——但其中没有修订历史。

---

我使用的代码（定义、更新和渲染视口）如下：-

function F_Render() 
{

    //... Discover the current window dimensions (usable)
    var WINDOW_USABLE_PIXELS_WIDTH = window.innerWidth;
    var WINDOW_USABLE_PIXELS_HEIGHT = window.innerHeight;

    var Fudge = 0;
    var FIXED_DOXELS_WIDTH  = 1024; 
    var FIXED_DOXELS_HEIGHT = 576; 
    var elastic_viewports = false;
    if (elastic_viewports)
        {
            var SLATE_DOXELS_WIDTH  = WINDOW_USABLE_PIXELS_WIDTH  - Fudge;
            var SLATE_DOXELS_HEIGHT = WINDOW_USABLE_PIXELS_HEIGHT - Fudge;
        }
    else
        {
            var SLATE_DOXELS_WIDTH  = FIXED_DOXELS_WIDTH  -Fudge;
            var SLATE_DOXELS_HEIGHT = FIXED_DOXELS_HEIGHT -Fudge;
        }       

    //**** NB SCREEN COORDS ORIGIN IS TOP LEFT CORNER so Y values increase DOWNWARDS *****

    //**** BUT RENDERER VIEWPORT COORDS INCREASE FROM BOTTOM LEFT

    var numMidPanels = 3;
    var mar = Math.floor( SLATE_DOXELS_HEIGHT/16 );   //...careful, changing this has knock-on effects! 
    midPanelX1min = mar;
    var fudge = SLATE_DOXELS_WIDTH*0.06;
    var fudge = 0;

    //...gives a common width value to be used by all mid panels
    var midPanelWidth        = fudge +(1/numMidPanels) * (SLATE_DOXELS_WIDTH - ((numMidPanels+1)* mar)) ;
    var midPanelAverageWidth = fudge +(1/numMidPanels) * (SLATE_DOXELS_WIDTH - ((numMidPanels+1)* mar)) ;

    var midPanelX1_Width = midPanelAverageWidth *2/3;
    var midPanelX2_Width = midPanelAverageWidth *5/3;
    var midPanelX3_Width = midPanelAverageWidth *2/3;

    //---

    var bottomPanelXmin = mar;  
    var bottomPanelYmin = mar;  
    var bottomPanelHeight = (1/3)* (SLATE_DOXELS_HEIGHT - (3*mar)); //...bottom third of screen height
    var bottomPanelWidth = (SLATE_DOXELS_WIDTH - (2*mar));  
    var midPanelHeight = (2/3)* (SLATE_DOXELS_HEIGHT - (3*mar));        
    midPanelX2min = mar + midPanelWidth + mar ;
    midPanelX3min = mar + midPanelWidth + mar + midPanelWidth + mar;    
    midPanelX2min = mar + midPanelX1_Width + mar ;
    midPanelX3min = mar + midPanelX1_Width + mar + midPanelX2_Width + mar;  
    midPanelYmin = mar + bottomPanelHeight + mar;
    midPanelYmax = mar + bottomPanelHeight + mar + midPanelHeight;  

    //... set ASPECT RATIOS

        //... BASE LAYER Scene111
        var BaseLayer_AspectRatio = SLATE_DOXELS_WIDTH/SLATE_DOXELS_HEIGHT;

        //... MIDDLE LAYER Scene222 Middle Panels

        var MidPanelX1_AspectRatio = midPanelX1_Width/midPanelHeight;
        var MidPanelX2_AspectRatio = midPanelX2_Width/midPanelHeight;
        var MidPanelX3_AspectRatio = midPanelX3_Width/midPanelHeight;

        //... TOP LAYER
        var BottomPanel_AspectRatio = bottomPanelWidth/bottomPanelHeight;

    //------------------------------------------------------------------------------------------

    //... do CAMERA UPDATES if required due to recent change
    if ( scene111camera01._SW_needsUpdate == true)
    {
    scene111camera01.aspect = BaseLayer_AspectRatio;
    scene111camera01.updateProjectionMatrix(); //...is this really neccy?
    scene111camera01._SW_needsUpdate = false;
    }

    //... MIDDLE LAYER Scene222 Middle Panels

    if ( scene222camera02._SW_needsUpdate == true)
    {
    scene222camera02.aspect = MidPanelX1_AspectRatio;
    scene222camera02.updateProjectionMatrix();
    scene222camera02._SW_needsUpdate = false;
    }

    if ( scene222camera03._SW_needsUpdate == true)
    {
    scene222camera03.aspect = MidPanelX2_AspectRatio;
    scene222camera03.updateProjectionMatrix();
    scene222camera03._SW_needsUpdate = false;
    }

    if ( scene222camera04._SW_needsUpdate == true)
    {
    scene222camera04.aspect = MidPanelX3_AspectRatio;
    scene222camera04.updateProjectionMatrix();
    scene222camera04._SW_needsUpdate = false;
    }

    //... TOP LAYER (DashBoard) Scene333

    if ( scene333camera05._SW_needsUpdate == true)
    {
    scene333camera05.aspect = BottomPanel_AspectRatio;
    scene333camera05.updateProjectionMatrix();  
    scene333camera05._SW_needsUpdate = false;
    }

    //==========================================================================================================

    //... Clear the entire raster area

    var Control_Panel_Num = 0;
    Renderer_ZERO.setViewport( 0, 0, SLATE_DOXELS_WIDTH, SLATE_DOXELS_HEIGHT );
    Renderer_ZERO.clear();

    //=========================================================================================================

    //... BASE LAYER, scene111  ... Single Panel (viewport)

    Renderer_ZERO.setViewport( 0, 0, SLATE_DOXELS_WIDTH, SLATE_DOXELS_HEIGHT ); 
    Renderer_ZERO.render( scene111, scene111camera01 );

    Control_Panel_Num = Control_Panel_Num+1;

    ObjectPickingActive=true;

    xxx = SOW_F_sim_Update_Panel_Data ( Control_Panel_Num,"BasePlane",0, 0, SLATE_DOXELS_WIDTH, SLATE_DOXELS_HEIGHT , ObjectPickingActive, scene111, scene111camera01  );   


    //===========================================================================================================

    //... MIDDLE LAYER, scene222 ... three panels (view-ports)

    Renderer_ZERO.clearDepth();


    //... MIDDLE LAYER, LEFT PANEL
    //showVP_scene222camera02  = true; //...now set elsewhere

    if (showVP_scene222camera02 == true)
    {
        Renderer_ZERO.setViewport( midPanelX1min, midPanelYmin, midPanelX1_Width , midPanelHeight  );
        Renderer_ZERO.render( scene222, scene222camera02 );

        Control_Panel_Num = Control_Panel_Num+1;
        ObjectPickingActive=true;
        xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Middle_Left",midPanelX1min, midPanelYmin, midPanelX1_Width , midPanelHeight, ObjectPickingActive, scene222, scene222camera02  );  
    }

    //... MIDDLE LAYER, CENTRE PANEL

    if (showVP_scene222camera03 == true)
    {
        var midPanelY2min = midPanelYmin  //-150 //*** JUST FOR TESTING ***
        Renderer_ZERO.setViewport( midPanelX2min, midPanelY2min, midPanelX2_Width, midPanelHeight );    
        Renderer_ZERO.render( scene222, scene222camera03 ); 

        Control_Panel_Num = Control_Panel_Num+1;
        ObjectPickingActive=true;
        xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Middle_Centre",midPanelX2min, midPanelY2min, midPanelX2_Width, midPanelHeight, ObjectPickingActive, scene222, scene222camera03  );    
    }

    if (showVP_scene222camera04 == true)
    {
        //... MIDDLE LAYER, RIGHT PANEL
        Renderer_ZERO.setViewport( midPanelX3min, midPanelYmin, midPanelX3_Width, midPanelHeight ); 
        Renderer_ZERO.render( scene222, scene222camera04 );     

        Control_Panel_Num = Control_Panel_Num+1;
        ObjectPickingActive=true;
        xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Middle_Right",midPanelX3min, midPanelYmin, midPanelX3_Width, midPanelHeight, ObjectPickingActive, scene222, scene222camera04  );  
    }

    //================================================================================================

    //... TOP LAYER Scene333
    //... THIS LAYER CONTAINS BUTTONS WHICH OVERPLOT MID LAYER 
    //... (Multi-renderers only: display stack sequence controlled by html div declaration sequence).
    //... UPPER LAYER (C)
    //   (DASHBOARD) ...BOTTOM STRIP

    //TEST
    //bottomPanelXmin
    //bottomPanelYmin=100; 
    //bottomPanelWidth
    //bottomPanelHeight= 300 ;
    //END TEST

    //TEST makes bottom panel viewport overlap upwards over the middle panels just to demo that we can do this
    // and thus we can stick objects in a high viewport which display in front of objects from a lower viewport
    // but NOTE WELL this only works reliably when VPs are from different scenes/renderers
    // otherwise conflicts can occur.

    var Fudged_bottomPanelHeight=bottomPanelHeight+40;

    Renderer_ZERO.clearDepth();
    Renderer_ZERO.setViewport( bottomPanelXmin, bottomPanelYmin, bottomPanelWidth, Fudged_bottomPanelHeight );  
    Renderer_ZERO.render( scene333, scene333camera05 );

    Control_Panel_Num = Control_Panel_Num+1;
    ObjectPickingActive=true;
    xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Bottom_Strip",bottomPanelXmin, bottomPanelYmin, bottomPanelWidth, Fudged_bottomPanelHeight, ObjectPickingActive, scene333, scene333camera05  );   

} //... END OF F_Render

---

如果有人能建议三个.js 中的哪些更改可能导致此问题，我将不胜感激？

Answer 1

从 r.86 开始，WebGLRenderer.setViewport() 和 WebGLRenderer.setScissor() 假设坐标系中 ( 0,0 ) 位于左上角。以前，它位于左下角。

three.js r.89