Examples: More usage of `setAnimationLoop()`. (#28250)

* Examples: More usage of `setAnimationLoop()`.

* Examples: Clean up.

examples/webgl_marchingcubes.html

@@ -52,7 +52,6 @@
 		const clock = new THREE.Clock();
 
 		init();
-		animate();
 
 		function init() {
 
@@ -104,6 +103,7 @@
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			container.appendChild( renderer.domElement );
 
 			// CONTROLS
@@ -321,8 +321,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			render();
 			stats.update();
 

examples/webgl_materials_alphahash.html

@@ -49,7 +49,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -100,6 +99,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -190,8 +190,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();

examples/webgl_materials_blending.html

@@ -26,7 +26,6 @@
 			const textureLoader = new THREE.TextureLoader();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -123,6 +122,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				// EVENTS
@@ -171,8 +171,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = Date.now() * 0.00025;
 				const ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
 				const oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;

examples/webgl_materials_blending_custom.html

@@ -34,7 +34,6 @@
 			const equations = { Add: THREE.AddEquation, Subtract: THREE.SubtractEquation, ReverseSubtract: THREE.ReverseSubtractEquation, Min: THREE.MinEquation, Max: THREE.MaxEquation };
 
 			init();
-			animate();
 
 			function init() {
 
@@ -174,6 +173,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				// EVENTS
@@ -237,8 +237,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = Date.now() * 0.00025;
 				const ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
 				const oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;

examples/webgl_materials_bumpmap.html

@@ -48,7 +48,6 @@
 			const windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -105,6 +104,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				renderer.shadowMap.enabled = true;
@@ -157,8 +157,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();

examples/webgl_materials_car.html

@@ -68,7 +68,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( render );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.85;
 				container.appendChild( renderer.domElement );
@@ -193,7 +193,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				controls.update();
 

examples/webgl_materials_channels.html

@@ -59,18 +59,6 @@
 			const BIAS = - 0.428408; // from original model
 
 			init();
-			animate();
-			initGui();
-
-			// Init gui
-			function initGui() {
-
-				const gui = new GUI();
-				gui.add( params, 'material', [ 'standard', 'normal', 'velocity', 'depthBasic', 'depthRGBA' ] );
-				gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
-				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
-
-			}
 
 			function init() {
 
@@ -80,6 +68,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -223,6 +212,13 @@
 
 				//
 
+				const gui = new GUI();
+				gui.add( params, 'material', [ 'standard', 'normal', 'velocity', 'depthBasic', 'depthRGBA' ] );
+				gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
+				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
+
+				//
+
 				window.addEventListener( 'resize', onWindowResize );
 
 			}
@@ -250,8 +246,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_cubemap.html

@@ -39,7 +39,6 @@
 			let pointLight;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -104,6 +103,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//controls
@@ -132,13 +132,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 				stats.update();
 

examples/webgl_materials_cubemap_dynamic.html

@@ -48,7 +48,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( animation );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				document.body.appendChild( renderer.domElement );
 
@@ -124,7 +124,7 @@
 
 			}
 
-			function animation( msTime ) {
+			function animate( msTime ) {
 
 				const time = msTime / 1000;
 

examples/webgl_materials_cubemap_mipmaps.html

@@ -35,7 +35,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			//load customized cube texture
 			async function loadCubeTextureWithMipmaps() {
@@ -142,6 +141,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//controls
@@ -164,7 +164,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_cubemap_refraction.html

@@ -41,7 +41,6 @@
 			let windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -83,6 +82,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -148,8 +148,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_materials_cubemap_render_to_mipmaps.html

@@ -84,8 +84,6 @@
 
 
 			init();
-			animate();
-
 
 			async function loadCubeTexture( urls ) {
 
@@ -169,6 +167,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -229,7 +228,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_curvature.html

@@ -64,7 +64,6 @@
 			let ninjaMeshRaw, curvatureAttribute, bufferGeo;
 
 			init();
-			animate();
 
 			//returns average of elements in a dictionary
 			function average( dict ) {
@@ -137,6 +136,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 
@@ -355,14 +355,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_displacementmap.html

@@ -55,7 +55,6 @@
 			let r = 0.0;
 
 			init();
-			animate();
 			initGui();
 
 			// Init gui
@@ -115,6 +114,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -235,8 +235,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 
 				stats.begin();

examples/webgl_materials_envmaps.html

@@ -34,7 +34,6 @@
 			let sphereMesh, sphereMaterial, params;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -74,6 +73,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -151,14 +151,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				if ( params.backgroundRotationX ) {
 
 					scene.backgroundRotation.x += 0.001;

examples/webgl_materials_envmaps_exr.html

@@ -45,7 +45,6 @@
 			let pngBackground, exrBackground;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -60,6 +59,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -147,8 +147,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_envmaps_groundprojected.html

@@ -147,15 +147,14 @@
 
 				const gui = new GUI();
 
-				gui.add( params, 'enabled' ).name( "Grounded" ).onChange( function ( value ) {
+				gui.add( params, 'enabled' ).name( 'Grounded' ).onChange( function ( value ) {
 
 					if ( value ) {
 
 						scene.add( skybox );
 						scene.background = null;
 
-					}
-					else {
+					} else {
 
 						scene.remove( skybox );
 						scene.background = scene.environment;
@@ -165,7 +164,9 @@
 					render();
 
 				} );
+
 				gui.open();
+			
 			}
 
 			function onWindowResize() {

examples/webgl_materials_envmaps_hdr.html

@@ -50,7 +50,6 @@
 			let ldrCubeMap, hdrCubeMap, rgbmCubeMap;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -133,6 +132,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//renderer.toneMapping = ReinhardToneMapping;
@@ -171,8 +171,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_modified.html

@@ -34,7 +34,6 @@
 			let camera, scene, renderer, stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -63,6 +62,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -134,8 +134,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();

examples/webgl_materials_normalmap.html

@@ -57,7 +57,6 @@
 			let composer, effectFXAA;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -120,6 +119,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -191,8 +191,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();

examples/webgl_materials_physical_clearcoat.html

@@ -39,7 +39,6 @@
 			let group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -177,6 +176,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -219,9 +219,7 @@
 			//
 
 			function animate() {
-
-				requestAnimationFrame( animate );
-
+			
 				render();
 
 				stats.update();

examples/webgl_materials_subsurface_scattering.html

@@ -38,7 +38,6 @@
 		let model;
 
 		init();
-		animate();
 
 		function init() {
 
@@ -75,6 +74,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			container.appendChild( renderer.domElement );
 
 			//
@@ -203,8 +203,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			render();
 
 			stats.update();

examples/webgl_materials_texture_anisotropy.html

@@ -81,8 +81,6 @@
 			const windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -168,6 +166,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 
 				renderer.domElement.style.position = 'relative';
@@ -193,8 +192,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_materials_texture_canvas.html

@@ -43,7 +43,6 @@
 
 			init();
 			setupCanvasDrawing();
-			animate();
 
 			function init() {
 
@@ -60,6 +59,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -140,8 +140,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				mesh.rotation.x += 0.01;
 				mesh.rotation.y += 0.01;
 

examples/webgl_materials_texture_filters.html

@@ -69,8 +69,6 @@
 			const windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -190,6 +188,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 
 				renderer.domElement.style.position = 'relative';
@@ -210,14 +209,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - ( mouseY - 200 ) - camera.position.y ) * .05;
 

examples/webgl_materials_texture_manualmipmap.html

@@ -69,8 +69,6 @@
 			const windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -202,6 +200,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 
 				renderer.domElement.style.position = 'relative';
@@ -222,14 +221,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - ( mouseY - 200 ) - camera.position.y ) * .05;
 

examples/webgl_materials_texture_partialupdate.html

@@ -34,7 +34,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 				camera.position.z = 2;
@@ -44,7 +44,7 @@
 				clock = new THREE.Clock();
 
 				const loader = new THREE.TextureLoader();
-				diffuseMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', animate );
+				diffuseMap = await loader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
 				diffuseMap.colorSpace = THREE.SRGBColorSpace;
 				diffuseMap.minFilter = THREE.LinearFilter;
 				diffuseMap.generateMipmaps = false;
@@ -68,6 +68,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -87,8 +88,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const elapsedTime = clock.getElapsedTime();
 
 				if ( elapsedTime - last > 0.1 ) {

examples/webgl_materials_toon.html

@@ -40,7 +40,6 @@
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 				init( font );
-				animate();
 
 			} );
 
@@ -62,6 +61,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				// Materials
@@ -180,8 +180,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_video.html

@@ -67,7 +67,6 @@
 			startButton.addEventListener( 'click', function () {
 
 				init();
-				animate();
 
 			} );
 
@@ -91,6 +90,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				video = document.getElementById( 'video' );
@@ -217,17 +217,9 @@
 
 			//
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
 			let h, counter = 1;
 
-			function render() {
+			function animate() {
 
 				const time = Date.now() * 0.00005;
 

examples/webgl_materials_video_webcam.html

@@ -32,7 +32,6 @@
 			let camera, scene, renderer, video;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -68,6 +67,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -114,7 +114,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_math_obb.html

@@ -44,7 +44,6 @@
 			const objects = [], mouse = new THREE.Vector2();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -106,6 +105,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -192,8 +192,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 
 				// transform cubes

examples/webgl_math_orientation_transform.html

@@ -35,7 +35,6 @@
 			const speed = 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -70,6 +69,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -93,8 +93,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( ! mesh.quaternion.equals( targetQuaternion ) ) {

examples/webgl_mesh_batch.html

@@ -73,7 +73,6 @@
 		init();
 		initGeometries();
 		initMesh();
-		animate();
 
 		//
 
@@ -225,6 +224,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( width, height );
+			renderer.setAnimationLoop( animate );
 			document.body.appendChild( renderer.domElement );
 
 			// scene
@@ -320,8 +320,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			animateMeshes();
 
 			controls.update();

examples/webgl_mirror.html

@@ -45,7 +45,6 @@
 			let groundMirror, verticalMirror;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -55,6 +54,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				// scene
@@ -193,8 +193,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const timer = Date.now() * 0.01;
 
 				sphereGroup.rotation.y -= 0.002;

examples/webgl_modifier_curve.html

@@ -45,7 +45,6 @@
 				action = ACTION_NONE;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -138,6 +137,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );
@@ -182,8 +182,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				if ( action === ACTION_SELECT ) {
 
 					rayCaster.setFromCamera( mouse, camera );

examples/webgl_modifier_curve_instanced.html

@@ -45,7 +45,6 @@
 				action = ACTION_NONE;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -164,6 +163,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );
@@ -212,8 +212,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				if ( action === ACTION_SELECT ) {
 
 					rayCaster.setFromCamera( mouse, camera );

examples/webgl_modifier_tessellation.html

@@ -86,7 +86,6 @@
 			loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 				init( font );
-				animate();
 
 			} );
 
@@ -183,6 +182,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
+				renderer.setAnimationLoop( animate );
 
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
@@ -209,8 +209,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();

examples/webgl_morphtargets_face.html

@@ -43,25 +43,26 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			let camera, scene, renderer, stats, mixer, clock, controls;
+
 			init();
 
 			function init() {
 
-				let mixer;
-
-				const clock = new THREE.Clock();
+				clock = new THREE.Clock();
 
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
 				camera.position.set( - 1.8, 0.8, 3 );
 
-				const scene = new THREE.Scene();
+				scene = new THREE.Scene();
 
-				const renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				container.appendChild( renderer.domElement );
@@ -107,7 +108,7 @@
 				scene.background = new THREE.Color( 0x666666 );
 				scene.environment = pmremGenerator.fromScene( environment ).texture;
 
-				const controls = new OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
 				controls.minDistance = 2.5;
 				controls.maxDistance = 5;
@@ -116,37 +117,40 @@
 				controls.maxPolarAngle = Math.PI / 1.8;
 				controls.target.set( 0, 0.15, - 0.2 );
 
-				const stats = new Stats();
+				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				renderer.setAnimationLoop( () => {
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
 
-					const delta = clock.getDelta();
+			function onWindowResize() {
 
-					if ( mixer ) {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-						mixer.update( delta );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-					}
+			}
 
-					renderer.render( scene, camera );
+			function animate() {
 
-					controls.update();
+				const delta = clock.getDelta();
 
-					stats.update();
+				if ( mixer ) {
 
-				} );
+					mixer.update( delta );
 
-				window.addEventListener( 'resize', () => {
+				}
 
-					camera.aspect = window.innerWidth / window.innerHeight;
-					camera.updateProjectionMatrix();
+				renderer.render( scene, camera );
 
-					renderer.setSize( window.innerWidth, window.innerHeight );
+				controls.update();
 
-				} );
+				stats.update();
 
 			}
+
 		</script>
 	</body>
 </html>

examples/webgl_morphtargets_horse.html

@@ -48,7 +48,6 @@
 			let prevTime = Date.now();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -91,7 +90,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -119,8 +118,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_morphtargets_sphere.html

@@ -38,7 +38,6 @@
 			const speed = 0.5;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -89,7 +88,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -116,7 +115,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				timer.update();
 				render();
 

examples/webgl_morphtargets_webcam.html

@@ -163,7 +163,7 @@
 
 					}
 
-					renderer.setAnimationLoop( animation );
+					renderer.setAnimationLoop( animate );
 
 				} );
 
@@ -215,7 +215,7 @@
 
 			const transform = new THREE.Object3D();
 
-			function animation() {
+			function animate() {
 
 				if ( video.readyState >= HTMLMediaElement.HAVE_METADATA ) {
 
@@ -298,10 +298,10 @@
 
 						}
 
-					eyeL.rotation.z = eyeScore.leftHorizontal * eyeRotationLimit;
-      					eyeR.rotation.z = eyeScore.rightHorizontal * eyeRotationLimit;
-      					eyeL.rotation.x = eyeScore.leftVertical * eyeRotationLimit;
-      					eyeR.rotation.x = eyeScore.rightVertical * eyeRotationLimit;
+						eyeL.rotation.z = eyeScore.leftHorizontal * eyeRotationLimit;
+						eyeR.rotation.z = eyeScore.rightHorizontal * eyeRotationLimit;
+						eyeL.rotation.x = eyeScore.leftVertical * eyeRotationLimit;
+						eyeR.rotation.x = eyeScore.rightVertical * eyeRotationLimit;
 			
 					}
 

examples/webgl_multiple_elements.html

@@ -83,7 +83,6 @@
 			const scenes = [];
 
 			init();
-			animate();
 
 			function init() {
 
@@ -156,6 +155,7 @@
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
 				renderer.setClearColor( 0xffffff, 1 );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 
 			}
 
@@ -174,13 +174,6 @@
 
 			function animate() {
 
-				render();
-				requestAnimationFrame( animate );
-
-			}
-
-			function render() {
-
 				updateSize();
 
 				canvas.style.transform = `translateY(${window.scrollY}px)`;

examples/webgl_multiple_elements_text.html

@@ -87,6 +87,7 @@
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 
 				views = document.querySelectorAll( '.view' );
 
@@ -184,13 +185,6 @@
 
 			function animate() {
 
-				render();
-				requestAnimationFrame( animate );
-
-			}
-
-			function render() {
-
 				updateSize();
 
 				renderer.setClearColor( 0xffffff );

examples/webgl_multiple_scenes_comparison.html

@@ -87,7 +87,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setScissorTest( true );
-				renderer.setAnimationLoop( render );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -154,7 +154,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				renderer.setScissor( 0, 0, sliderPos, window.innerHeight );
 				renderer.render( sceneL, camera );

examples/webgl_multiple_views.html

@@ -89,7 +89,6 @@
 			];
 
 			init();
-			animate();
 
 			function init() {
 
@@ -210,6 +209,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -244,8 +244,6 @@
 				render();
 				stats.update();
 
-				requestAnimationFrame( animate );
-
 			}
 
 			function render() {

examples/webgl_panorama_cube.html

@@ -32,7 +32,6 @@
 			let scene;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -41,6 +40,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -118,8 +118,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update(); // required when damping is enabled
 
 				renderer.render( scene, camera );

examples/webgl_panorama_equirectangular.html

@@ -36,7 +36,6 @@
 				phi = 0, theta = 0;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -61,6 +60,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				container.style.touchAction = 'none';
@@ -170,13 +170,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				update();
-
-			}
-
-			function update() {
-
 				if ( isUserInteracting === false ) {
 
 					lon += 0.1;

examples/webgl_points_billboards.html

@@ -36,7 +36,6 @@
 			let windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -75,6 +74,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -130,8 +130,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_points_dynamic.html

@@ -52,7 +52,6 @@
 			let stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -96,6 +95,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
@@ -237,7 +237,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				render();
 				stats.update();
 

examples/webgl_points_sprites.html

@@ -39,7 +39,6 @@
 			const materials = [];
 
 			init();
-			animate();
 
 			function init() {
 
@@ -110,6 +109,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -172,8 +172,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_points_waves.html

@@ -70,7 +70,6 @@
 			let windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -132,6 +131,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -173,8 +173,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_portal.html

@@ -46,7 +46,6 @@
 				rightPortalTexture, bottomLeftCorner, bottomRightCorner, topLeftCorner;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -54,11 +53,12 @@
 
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				renderer.setAnimationLoop( animate );
 				renderer.localClippingEnabled = true;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				container.appendChild( renderer.domElement );
 
 				// scene
 				scene = new THREE.Scene();
@@ -205,8 +205,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				// move the bouncing sphere(s)
 				const timerOne = Date.now() * 0.01;
 				const timerTwo = timerOne + Math.PI * 10.0;