Three.js

Multiple canvas setup

by uttam_1137

HTML

<style>
.black-scenes {
                background-color: black;
                color:white;
            }
            body {
    margin: 0;
    padding: 0;
}
.test-div {
    width: 100vw;
    height: 100vh;
		max-width:90%;
		margin-left:auto;
		margin-right:auto;
    display: flex;
    flex-direction: raw;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.test-div:small {
    flex-direction: column;
    height: auto;
}

.drawing {
    /* background-color: aliceblue; */
    width: 50%;
    height: 100%;
    border: 1px solid royalblue;
    /* z-index: 1; */
}
.drawing:small {
    width: 100%;
}
.text {
    width: 50%;
}
</style>
<div class="all-container">
            <div class="white-scenes">
                <div class="test-div">
                    <div class="text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Aspernatur perspiciatis eligendi ea, quibusdam repellat
                        molestiae. Deleniti sequi porro, ex accusantium tempore
                        modi suscipit omnis animi pariatur fugit, molestiae
                        labore eos?
                    </div>
                    <span class="drawing white-drawing">
                    </span>
                </div>
                <div class="test-div">
                    <div class="text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Aspernatur perspiciatis eligendi ea, quibusdam repellat
                        molestiae. Deleniti sequi porro, ex accusantium tempore
                        modi suscipit omnis animi pariatur fugit, molestiae
                        labore eos?
                    </div>
                    <span class="drawing white-drawing">
                    </span>
                </div>
                <div class="test-div">
                    <div class="text">
                        Lorem ipsum dolor...

JavaScript

let renderer;
let sceneElements = [];

function main() {
		const canvas = document.createElement('canvas');
    renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
    renderer.physicallyCorrectLights = true;
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.setScissorTest(true);
    addSceneToDivs();
    requestAnimationFrame(animate);
}

function addSceneToDivs() {
    // add all white scenes
    const whiteSceneDivs = document.querySelectorAll('.white-drawing');
    const whiteSceneEnteries = whiteSceneDivs.entries();
    for (const [index, drawingElement] of whiteSceneEnteries) {
		drawingElement.setAttribute('number', index);
        createSceneFor(drawingElement, index, true);

    }

    // add all black scenes
    const blackSceneDivs = document.querySelectorAll('.black-drawing');
    const blackSceneEnteries = blackSceneDivs.entries();
    for (const [index, drawingElement] of blackSceneEnteries) {
				drawingElement.setAttribute('number', index + 5);
        createSceneFor(drawingElement, index, false);

    }

}

function createSceneFor(htmlElement, index, isWhiteScene) {

    const animateFunc = createSceneAndGetAnimateFunction(htmlElement, index);
    addScene(htmlElement, animateFunc);

    function createSceneAndGetAnimateFunction(elem, index) {
        const { scene, camera } = getSceneCamera(elem);
        
        const pos_factor = 100 * index + 1000;

        const cameraZ = pos_factor + 6.5;
        camera.position.set(pos_factor, 0, cameraZ);
        camera.oldX = pos_factor;
        camera.oldZ = pos_factor + 10;

        const geometry = new THREE.BoxGeometry( 2, 2, 2 );
        const material = new THREE.MeshNormalMaterial();

        const cube = new THREE.Mesh( geometry, material );
				cube.position.set(pos_factor, 0, pos_factor);
        scene.add( cube );

        return (time, rect, number) => {
						console.log('rendering : ', number);
						cube.rotation.x += 0.01;
						cube.rotation.y +=...