Render multiple views

Questions
3

I use several containers with separate cameras and renderers.

See from the Collection of examples from discourse.threejs.org :
ConstructionBasis

and Construction of frames with contour/profile

In another project with several containers

2023-11-10 09.58.33
2023-11-10 09.58.331298×721 99.4 KB


const containerA = document.querySelector( '.containerA' );
const containerB = document.querySelector( '.containerB' );
const sliderAB = document.querySelector( '.sliderAB' );
const containerC = document.querySelector( '.containerC' );
const containerD = document.querySelector( '.containerD' );

// scenes 
const sceneA = new THREE.Scene( );
sceneA.background = new THREE.Color( 0xdedede );

const sceneB = new THREE.Scene( );
sceneB.background = new THREE.Color( 0xeeeeee );

const sceneC = new THREE.Scene( );
sceneC.background = new THREE.Color( 0xf6f6f6 );

const sceneD = new THREE.Scene( );
sceneD.background = new THREE.Color( 0xf6f6f6 );

// cameras
const cameraA = new THREE.PerspectiveCamera( 55, containerA.clientWidth / containerA.clientHeight, 0.001, 10000 ); 
cameraA.position.set( 0.5, 2.5, 3.5 );

widthB = 0.95 * containerB.clientWidth;
heightB = 0.95 * containerB.clientHeight;
if ( widthB > 2 * heightB ) { widthB = 2 * heightB; } else { heightB = widthB / 2; }
aspectB = widthB / heightB;
const cameraB = new THREE.OrthographicCamera( -aspectB, aspectB, 1, -1, 0.01, 0.2 );
cameraB.position.set( 0, 0, 0.1 );

leftC = widthB / 4 + 10; // +10 to right
topC = 0;
widthC = heightB;
heightC = heightB;
aspectC = widthC / heightC;
const cameraC = new THREE.OrthographicCamera( -aspectC, aspectC, 1, -1, 0.01, 0.2 );
cameraC.position.set( 0, 0, 0.1 );

leftD = leftC + widthC + 30;
topD = 0;
widthD = widthC / 10;
heightD = heightC;
aspectD = widthD / heightD;
const cameraD = new THREE.OrthographicCamera( -aspectD, aspectD, 1, -1, 0.01, 0.2 );
cameraD.position.set( 0, 0, 0.1 );

rendererA.setAnimationLoop( ( ) => { render( ); } );
rendererB.setAnimationLoop( ( ) => { render( ); } );
rendererC.setAnimationLoop( ( ) => { render( ); } );
rendererD.setAnimationLoop( ( ) => { render( ); } );

// renderers 
const rendererA = new THREE.WebGLRenderer( { antialias: true } );
rendererA.setSize( containerA.clientWidth, containerA.clientHeight );
rendererA.setPixelRatio( window.devicePixelRatio ); 
containerA.appendChild( rendererA.domElement );

const rendererB = new THREE.WebGLRenderer( { antialias: true } );
rendererB.setSize( widthB, heightB );
rendererB.setPixelRatio( window.devicePixelRatio );
containerB.appendChild( rendererB.domElement );

const rendererC = new THREE.WebGLRenderer( { antialias: true } );
rendererC.setSize( widthC, heightC );
rendererC.setPixelRatio( window.devicePixelRatio ); 
containerC.appendChild( rendererC.domElement );

const rendererD = new THREE.WebGLRenderer( { antialias: true } );
rendererD.setSize( widthD, heightD );
rendererD.setPixelRatio( window.devicePixelRatio ); 
containerD.appendChild( rendererD.domElement );

function render( ) {
 
	rendererA.render( sceneA, cameraA );
	rendererB.render( sceneB, cameraB );
	rendererC.render( sceneC, cameraC );
    rendererD.render( sceneD, cameraD );
    
}