three.js/playground/SplitscreenManager.js

export class SplitscreenManager {

    constructor( editor ) {

        this.editor = editor;
        this.renderer = editor.renderer;
        this.composer = editor.composer;

        this.gutter = null;
        this.gutterMoving = false;
        this.gutterOffset = 0.75;

    }

    setSplitview( value ) {

		const nodeDOM = this.editor.domElement;
		const rendererContainer = this.renderer.domElement.parentNode;

		if ( value ) {

			this.addGutter( rendererContainer, nodeDOM );

		} else {

			this.removeGutter( rendererContainer, nodeDOM );

		}

    }

    addGutter( rendererContainer, nodeDOM ) {

        rendererContainer.style[ "z-index" ] = 20;

        this.gutter = document.createElement( "f-gutter" );

        nodeDOM.parentNode.appendChild( this.gutter );

        const onGutterMovement = () => {

            const offset = this.gutterOffset;

            this.gutter.style[ "left" ] = 100 * offset + '%';
            rendererContainer.style[ "left" ] = 100 * offset + '%';
            rendererContainer.style[ "width" ] = 100 * (1 - offset) + '%';
            nodeDOM.style[ "width" ] = 100 * offset + '%';

        }
    
        this.gutter.addEventListener( 'mousedown', ( event ) => {

            this.gutterMoving = true;

        } );

        document.addEventListener( 'mousemove', ( event ) => {

            if ( this.gutter && this.gutterMoving ) {

                this.gutterOffset = Math.max(0, Math.min(1, event.clientX / window.innerWidth));
                onGutterMovement();

            }

        } );

        document.addEventListener( 'mouseup', ( event ) => {

            this.gutterMoving = false;

        });

        onGutterMovement();

    }

    removeGutter( rendererContainer, nodeDOM ) {

        rendererContainer.style[ "z-index" ] = 0;

        this.gutter.remove();
        this.gutter = null;
    
        rendererContainer.style[ "left" ] = '0%';
        rendererContainer.style[ "width" ] = '100%';
        nodeDOM.style[ "width" ] = '100%';

    }

}