How does the rendering loop work?

Hey there,

I have another question to threejs. This time the question is about the rendering loop. But first here is a part of my code:

function main() {
    const canvas = document.querySelector( "#machine-model" );
    let height = canvas.clientHeight;
    let width = canvas.clientWidth;


    const renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true, alpha: true } );       // alpha = true -> alpha = 0
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( width, height );

    function resizeRenderer() {

        height = canvas.clientWidth;    // clientWidth is the space that the actual displayed content needs
        width = canvas.clientWidth;

        const needResize = ( height != canvas.height | width != canvas.width );     // width is the width of the complete element

        if ( needResize ) {

            renderer.setSize( width, height, false );


        return needResize;


    function render() {

        if ( resizeRenderer() ) {

            camera.aspect = canvas.clientWidth / canvas.clientHeight;

        renderer.render( scene, camera );

        requestAnimationFrame( render );


    requestAnimationFrame( render );



If my script gets parsed it will be executed one time. At the end of the script I have the render loop. This loop will be executed again and again, right? The code before the loop only one time? If I refresh the page the whole script will be executed again? (I’m used to programming microcontroller so web programming confuses me a bit)

If i compare my code with the instructions here Threejs - Responsive I don’t redeclare the canvas variable. Do I have to make it like in the instructions? I think the object won’t refresh if I don’t do it, right?