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;
camera.updateProjectionMatrix();
}
renderer.render( scene, camera );
requestAnimationFrame( render );
}
requestAnimationFrame( render );
};
main();
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?