OnWindowResize with multiple overlayed scenes

Questions
1

First of all, amazing framework. Absolutely.
I’m having trouble making OnWindowResize to work properly. This is my configuration:

create_scene() {
    // Scene creation
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color("#0f1738");
    // Ortographic scene for controls
    this.orthoScene = new THREE.Scene()
}

create_renderer() {
    // Generic renderer
    this.renderer = new THREE.WebGLRenderer({antialias: true});
    this.renderer.autoClear = false
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.outputEncoding = THREE.sRGBEncoding;
    document.body.appendChild(this.renderer.domElement);
    // Renderer for labels
    this.labelRenderer = new CSS2DRenderer();
    this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
    this.labelRenderer.domElement.style.position = 'absolute';
    this.labelRenderer.domElement.style.top = '0px';
    document.body.appendChild(this.labelRenderer.domElement);
}

create_camera() {
    this.aspect_ratio = window.innerWidth / window.innerHeight
    // PerspectiveCamera
    this.camera = new THREE.PerspectiveCamera(40, this.aspect_ratio, 1, 2100);
    this.camera.position.set(5, 2, 20);

    //  OrtographicCamera
    let frustumSize = 20
    this.orthoCamera = new THREE.OrthographicCamera(frustumSize * this.aspect_ratio / -2, frustumSize * this.aspect_ratio / 2, frustumSize / 2, frustumSize / -2, -100, 200);
    console.log(this.aspect_ratio)
}

The output is something like this:

threeScreen
threeScreen1911×973 294 KB

Where the bottom bar is the second scene with an ortographic camera. It works like a navigable bar when the screen size is smaller and it remains in place.

My rendering is done like this:

    this.renderer.clear();
    this.renderer.render(this.scene, this.camera)
    //this.labelRenderer.render(this.scene, this.camera)
    this.renderer.clearDepth();
    this.renderer.render(this.orthoScene, this.orthoCamera);
    this.labelRenderer.render(this.orthoScene, this.orthoCamera)
    this.stats.end()

I just can’t seem to get it working when the window resizes, for example on portrait -> landscape when on mobile. I’ve tried multiple ways, the last one being:

onWindowResize = (evt) => {
    this.aspect_ratio = window.innerHeight / window.innerWidth;

    this.camera.aspect = this.aspect_ratio
    this.camera.updateProjectionMatrix();
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.labelRenderer.setSize(window.innerWidth, window.innerHeight);

    this.orthoCamera.left = 20 * this.aspect_ratio / -2;
    this.orthoCamera.right = 20 * this.aspect_ratio / 2;
    this.orthoCamera.top = 20 / 2;
    this.orthoCamera.bottom = - 20 / 2;

    this.orthoCamera.updateProjectionMatrix();
    //this.renderer.setSize(window.innerWidth, window.innerHeight);
    //this.labelRenderer.setSize( window.innerWidth, window.innerHeight );
}

Even this solution is inspired by something i’ve found in another question.
The result so far has been:

resize1
resize1812×373 113 KB

As opposed to the expectation:
resize2
resize2811×374 257 KB

Any help is deeply appreciated. Thanks!