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

examples/tags.json

@@ -6,6 +6,7 @@
 	"misc_controls_trackball": [ "rotation" ],
 	"misc_controls_transform": [ "scale", "rotate", "translate" ],
 	"physics_ammo_cloth": [ "integration" ],
+	"physics_jolt_instancing": [ "external" ],
 	"physics_rapier_instancing": [ "external" ],
 	"webgl_clipping": [ "solid" ],
 	"webgl_clipping_advanced": [ "solid" ],

examples/webgl_camera.html

@@ -43,7 +43,6 @@
 			const frustumSize = 600;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -131,6 +130,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				renderer.setScissorTest( true );
@@ -199,8 +199,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_camera_array.html

@@ -25,7 +25,6 @@
 			const AMOUNT = 6;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -86,6 +85,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -134,8 +134,6 @@
 
 				renderer.render( scene, camera );
 
-				requestAnimationFrame( animate );
-
 			}
 
 		</script>

examples/webgl_camera_cinematic.html

@@ -47,7 +47,6 @@
 			let theta = 0;
 
 			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 );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -172,8 +172,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate, renderer.domElement );
-
 				render();
 				stats.update();
 

examples/webgl_clipping.html

@@ -28,7 +28,6 @@
 			let camera, scene, renderer, startTime, object, stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -103,26 +102,28 @@
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				// Stats
-
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				// Renderer
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				window.addEventListener( 'resize', onWindowResize );
+				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
+				window.addEventListener( 'resize', onWindowResize );
+
 				// ***** Clipping setup (renderer): *****
 				const globalPlanes = [ globalPlane ],
 					Empty = Object.freeze( [] );
 				renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
 				renderer.localClippingEnabled = true;
 
+				// Stats
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
 				// Controls
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -235,8 +236,6 @@
 				const currentTime = Date.now();
 				const time = ( currentTime - startTime ) / 1000;
 
-				requestAnimationFrame( animate );
-
 				object.position.y = 0.8;
 				object.rotation.x = time * 0.5;
 				object.rotation.y = time * 0.2;

examples/webgl_clipping_advanced.html

@@ -279,16 +279,18 @@
 				const container = document.body;
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				window.addEventListener( 'resize', onWindowResize );
+				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 				// Clipping setup:
 				globalClippingPlanes = createPlanes( GlobalClippingPlanes.length );
 				renderer.clippingPlanes = Empty;
 				renderer.localClippingEnabled = true;
 
+				window.addEventListener( 'resize', onWindowResize );
+
 				// Stats
 
 				stats = new Stats();
@@ -397,8 +399,6 @@
 				const currentTime = Date.now(),
 					time = ( currentTime - startTime ) / 1000;
 
-				requestAnimationFrame( animate );
-
 				object.position.y = 1;
 				object.rotation.x = time * 0.5;
 				object.rotation.y = time * 0.2;
@@ -433,7 +433,6 @@
 			}
 
 			init();
-			animate();
 
 		</script>
 

examples/webgl_clipping_stencil.html

@@ -58,7 +58,6 @@
 			};
 
 			init();
-			animate();
 
 			function createPlaneStencilGroup( geometry, plane, renderOrder ) {
 
@@ -211,20 +210,23 @@
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				// Stats
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				// Renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true, stencil: true } );
-				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setClearColor( 0x263238 );
-				window.addEventListener( 'resize', onWindowResize );
+				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
+				renderer.localClippingEnabled = true;
 				document.body.appendChild( renderer.domElement );
 
-				renderer.localClippingEnabled = true;
+				// Stats
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
 
 				// Controls
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -284,8 +286,6 @@
 
 				const delta = clock.getDelta();
 
-				requestAnimationFrame( animate );
-
 				if ( params.animate ) {
 
 					object.rotation.x += delta * 0.5;

examples/webgl_custom_attributes.html

@@ -78,7 +78,6 @@
 			let displacement, noise;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -128,6 +127,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
@@ -152,8 +152,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_custom_attributes_lines.html

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

examples/webgl_custom_attributes_points.html

@@ -71,7 +71,6 @@
 			const HEIGHT = window.innerHeight;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -145,6 +144,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
+				renderer.setAnimationLoop( animate );
 
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
@@ -169,8 +169,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_custom_attributes_points2.html

@@ -73,7 +73,6 @@
 			const HEIGHT = window.innerHeight;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -162,6 +161,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
+				renderer.setAnimationLoop( animate );
 
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
@@ -251,8 +251,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_custom_attributes_points3.html

@@ -84,7 +84,6 @@
 			const HEIGHT = window.innerHeight;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -237,6 +236,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
+				renderer.setAnimationLoop( animate );
 
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
@@ -261,8 +261,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_decals.html

@@ -86,13 +86,13 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
 				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();
@@ -293,8 +293,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
 				stats.update();

examples/webgl_depth_texture.html

@@ -83,7 +83,6 @@
 			let camera, scene, renderer, controls, stats;
 			let target;
 			let postScene, postCamera, postMaterial;
-			const supportsExtension = true;
 
 			const params = {
 				format: THREE.DepthFormat,
@@ -94,13 +93,13 @@
 			const types = { UnsignedShortType: THREE.UnsignedShortType, UnsignedIntType: THREE.UnsignedIntType, UnsignedInt248Type: THREE.UnsignedInt248Type };
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -216,10 +215,6 @@
 
 			function animate() {
 
-				if ( ! supportsExtension ) return;
-
-				requestAnimationFrame( animate );
-
 				// render scene into target
 				renderer.setRenderTarget( target );
 				renderer.render( scene, camera );

examples/webgl_effects_anaglyph.html

@@ -40,7 +40,6 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove );
 
 			init();
-			animate();
 
 			function init() {
 
@@ -86,6 +85,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				const width = window.innerWidth || 2;
@@ -123,8 +123,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 			}

examples/webgl_effects_ascii.html

@@ -33,7 +33,6 @@
 			const start = Date.now();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -64,6 +63,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				effect = new AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );
 				effect.setSize( window.innerWidth, window.innerHeight );
@@ -97,14 +97,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const timer = Date.now() - start;
 
 				sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;

examples/webgl_effects_parallaxbarrier.html

@@ -41,7 +41,6 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove );
 
 			init();
-			animate();
 
 			function init() {
 
@@ -87,6 +86,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				const width = window.innerWidth || 2;
@@ -124,14 +124,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const timer = 0.0001 * Date.now();
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;

examples/webgl_effects_peppersghost.html

@@ -34,7 +34,6 @@
 			let group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -93,6 +92,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				effect = new PeppersGhostEffect( renderer );
@@ -114,8 +114,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				group.rotation.y += 0.01;
 
 				effect.render( scene, camera );

examples/webgl_effects_stereo.html

@@ -39,7 +39,6 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove );
 
 			init();
-			animate();
 
 			function init() {
 
@@ -80,6 +79,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				effect = new StereoEffect( renderer );
@@ -114,14 +114,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const timer = 0.0001 * Date.now();
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;

examples/webgl_framebuffer_texture.html

@@ -65,7 +65,6 @@
 			const color = new THREE.Color();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -120,6 +119,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 
@@ -169,8 +169,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const colorAttribute = line.geometry.getAttribute( 'color' );
 				updateColors( colorAttribute );
 

examples/webgl_geometries.html

@@ -28,7 +28,6 @@
 			let camera, scene, renderer, stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -120,6 +119,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 );
 
 				stats = new Stats();
@@ -144,8 +144,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometries_parametric.html

@@ -33,7 +33,6 @@
 			let camera, scene, renderer, stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -110,6 +109,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();
@@ -130,8 +130,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_colors.html

@@ -45,7 +45,6 @@
 			let windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -160,6 +159,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();
@@ -196,8 +196,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_convex.html

@@ -30,7 +30,6 @@
 			let group, camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -39,6 +38,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 );
 
 				// camera
@@ -141,16 +141,8 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				group.rotation.y += 0.005;
 
-				render();
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_csg.html

@@ -58,7 +58,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -85,6 +84,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 				document.body.appendChild( renderer.domElement );
@@ -196,8 +196,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				// update the transforms
 				const t = window.performance.now() + 9000;
 				baseBrush.rotation.x = t * 0.0001;

examples/webgl_geometry_cube.html

@@ -24,7 +24,6 @@
 			let mesh;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -45,6 +44,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 );
 
 				//
@@ -64,8 +64,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				mesh.rotation.x += 0.005;
 				mesh.rotation.y += 0.01;
 

examples/webgl_geometry_dynamic.html

@@ -42,7 +42,6 @@
 			const worldWidth = 128, worldDepth = 128;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -81,6 +80,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 );
 
 				controls = new FirstPersonControls( camera, renderer.domElement );
@@ -112,8 +112,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_extrude_shapes.html

@@ -34,7 +34,6 @@
 			let camera, scene, renderer, controls;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -51,6 +50,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 );
 
 				scene = new THREE.Scene();
@@ -182,8 +182,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 				renderer.render( scene, camera );
 

examples/webgl_geometry_extrude_splines.html

@@ -162,7 +162,6 @@
 			}
 
 			init();
-			animate();
 
 			function init() {
 
@@ -212,6 +211,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
@@ -290,8 +290,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_minecraft.html

@@ -51,7 +51,6 @@
 			const clock = new THREE.Clock();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -167,6 +166,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 = new FirstPersonControls( camera, renderer.domElement );
@@ -232,8 +232,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_nurbs.html

@@ -54,7 +54,6 @@
 			let windowHalfX = window.innerWidth / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -322,6 +321,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();
@@ -384,8 +384,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_sdf.html

@@ -79,7 +79,6 @@
 			`;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -96,6 +95,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 );
 
 				stats = new Stats();
@@ -192,8 +192,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 
 				if ( settings.autoRotate ) {

examples/webgl_geometry_shapes.html

@@ -46,7 +46,6 @@
 			let windowHalfX = window.innerWidth / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -357,6 +356,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();
@@ -419,8 +419,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_terrain.html

@@ -46,7 +46,6 @@
 			const clock = new THREE.Clock();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -85,6 +84,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				controls = new FirstPersonControls( camera, renderer.domElement );
@@ -214,8 +214,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_terrain_raycast.html

@@ -53,7 +53,6 @@
 			const pointer = new THREE.Vector2();
 
 			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 );
 				container.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -227,8 +227,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_geometry_text.html

@@ -95,7 +95,6 @@
 			let fontIndex = 1;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -151,6 +150,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				// EVENTS
@@ -385,14 +385,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 
 				camera.lookAt( cameraTarget );

examples/webgl_gpgpu_birds.html

@@ -434,7 +434,6 @@
 			let birdUniforms;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -451,6 +450,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				initComputeRenderer();
@@ -634,8 +634,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_gpgpu_birds_gltf.html

@@ -340,7 +340,6 @@
 				BirdGeometry.setIndex( indices );
 
 				init();
-				animate();
 
 			} );
 
@@ -390,6 +389,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				initComputeRenderer();
@@ -631,8 +631,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_gpgpu_protoplanet.html

@@ -263,7 +263,6 @@
 			let effectController;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -279,6 +278,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -533,8 +533,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_gpgpu_water.html

@@ -294,7 +294,6 @@
 			const simplex = new SimplexNoise();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -318,6 +317,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -667,8 +667,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_helpers.html

@@ -35,13 +35,13 @@
 			let vth;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -132,8 +132,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = - performance.now() * 0.0003;
 
 				camera.position.x = 400 * Math.cos( time );

examples/webgl_instancing_dynamic.html

@@ -31,7 +31,6 @@
 			const dummy = new THREE.Object3D();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -67,6 +66,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 );
-
 				render();
 
 				stats.update();

examples/webgl_instancing_morph.html

@@ -39,7 +39,6 @@
 			const clock = new THREE.Clock( true );
 
 			init();
-			animate();
 
 			function init() {
 
@@ -128,6 +127,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.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.VSMShadowMap;
@@ -155,8 +155,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();

examples/webgl_instancing_performance.html

@@ -64,7 +64,6 @@
 
 		init();
 		initMesh();
-		animate();
 
 		//
 
@@ -250,6 +249,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( width, height );
+			renderer.setAnimationLoop( animate );
 			container = document.getElementById( 'container' );
 			container.appendChild( renderer.domElement );
 
@@ -306,19 +306,12 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			controls.update();
-			stats.update();
-
-			render();
-
-		}
-
-		function render() {
 
 			renderer.render( scene, camera );
 
+			stats.update();
+
 		}
 
 		//

examples/webgl_instancing_raycast.html

@@ -37,7 +37,6 @@
 			const white = new THREE.Color().setHex( 0xffffff );
 
 			init();
-			animate();
 
 			function init() {
 
@@ -90,6 +89,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 );
 
 				controls = new OrbitControls( camera, renderer.domElement );
@@ -125,8 +125,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 
 				raycaster.setFromCamera( mouse, camera );
@@ -149,18 +147,12 @@
 
 				}
 
-				render();
+				renderer.render( scene, camera );
 
 				stats.update();
 
 			}
 
-			function render() {
-
-				renderer.render( scene, camera );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgl_instancing_scatter.html

@@ -112,7 +112,6 @@
 				resample();
 
 				init();
-				animate();
 
 			} );
 
@@ -170,6 +169,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 );
 
 				//
@@ -279,8 +279,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();

examples/webgl_interactive_buffergeometry.html

@@ -35,7 +35,6 @@
 			let mesh, line;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -199,6 +198,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -233,8 +233,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_interactive_cubes.html

@@ -46,7 +46,6 @@
 			const radius = 5;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -86,6 +85,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 );
 
 				stats = new Stats();
@@ -119,8 +119,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_interactive_cubes_gpu.html

@@ -53,7 +53,6 @@
 			const clearColor = new THREE.Color();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -201,6 +200,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 = new TrackballControls( camera, renderer.domElement );
@@ -230,8 +230,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_interactive_cubes_ortho.html

@@ -47,7 +47,6 @@
 			const frustumSize = 50;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -88,6 +87,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 );
 
 				stats = new Stats();
@@ -127,8 +127,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_interactive_lines.html

@@ -39,7 +39,6 @@
 			let theta = 0;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -139,6 +138,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();
@@ -172,8 +172,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_interactive_points.html

@@ -79,7 +79,6 @@
 			let pointer, INTERSECTED;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -148,6 +147,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -185,8 +185,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_interactive_raycasting_points.html

@@ -44,7 +44,6 @@
 			const rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
 
 			init();
-			animate();
 
 			function generatePointCloudGeometry( color, width, length ) {
 
@@ -203,6 +202,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -240,8 +240,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_layers.html

@@ -44,7 +44,6 @@
 			const radius = 5;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -97,6 +96,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();
@@ -162,8 +162,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_lensflares.html

@@ -40,7 +40,6 @@
 			const clock = new THREE.Clock();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -124,6 +123,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -162,8 +162,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_lights_hemisphere.html

@@ -80,7 +80,6 @@
 			const clock = new THREE.Clock();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -196,6 +195,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;
 
@@ -246,8 +246,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_lights_physical.html

@@ -74,7 +74,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -227,10 +226,11 @@
 
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.shadowMap.enabled = true;
-				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
+				renderer.toneMapping = THREE.ReinhardToneMapping;
 				container.appendChild( renderer.domElement );
 
 
@@ -264,14 +264,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				renderer.toneMappingExposure = Math.pow( params.exposure, 5.0 ); // to allow for very bright scenes.
 				renderer.shadowMap.enabled = params.shadows;
 				bulbLight.castShadow = params.shadows;

examples/webgl_lights_pointlights.html

@@ -37,7 +37,6 @@
 			const clock = new THREE.Clock();
 
 			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 );
 				document.body.appendChild( renderer.domElement );
 
 				//stats
@@ -105,8 +105,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_lights_spotlight.html

@@ -41,17 +41,15 @@
 				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.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
-
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
 
-				renderer.setAnimationLoop( render );
-
 				scene = new THREE.Scene();
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
@@ -230,7 +228,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				const time = performance.now() / 3000;
 

examples/webgl_lights_spotlights.html

@@ -30,6 +30,7 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 
 			const camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100 );
 
@@ -133,17 +134,17 @@
 
 			}
 
-			function animate() {
+			function updateTweens() {
 
 				tween( spotLight1 );
 				tween( spotLight2 );
 				tween( spotLight3 );
 
-				setTimeout( animate, 5000 );
+				setTimeout( updateTweens, 5000 );
 
 			}
 
-			function render() {
+			function animate() {
 
 				TWEEN.update();
 
@@ -153,13 +154,10 @@
 
 				renderer.render( scene, camera );
 
-				requestAnimationFrame( render );
-
 			}
 
 			init();
-			render();
-			animate();
+			updateTweens();
 
 		</script>
 	</body>

examples/webgl_lines_colors.html

@@ -36,7 +36,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -48,6 +47,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 );
 
 				//
@@ -199,13 +199,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05;
 

examples/webgl_lines_dashed.html

@@ -33,7 +33,6 @@
 			const WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -70,6 +69,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -145,8 +145,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_lines_fat.html

@@ -47,14 +47,14 @@
 			let insetHeight;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000, 0.0 );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -167,10 +167,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				stats.update();
-
 				// main scene
 
 				renderer.setClearColor( 0x000000, 0 );
@@ -208,6 +204,8 @@
 
 				renderer.setScissorTest( false );
 
+				stats.update();
+
 			}
 
 			//

examples/webgl_lines_fat_raycasting.html

@@ -93,7 +93,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -101,8 +100,9 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000, 0.0 );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -228,10 +228,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				stats.update();
-
 				const delta = clock.getDelta();
 
 				const obj = line.visible ? line : segments;
@@ -282,6 +278,8 @@
 				renderer.render( scene, camera );
 				gpuPanel.endQuery();
 
+				stats.update();
+
 			}
 
 			//

examples/webgl_lines_fat_wireframe.html

@@ -45,14 +45,14 @@
 			let insetHeight;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000, 0.0 );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -130,10 +130,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				stats.update();
-
 				// main scene
 
 				renderer.setClearColor( 0x000000, 0 );
@@ -167,6 +163,8 @@
 
 				renderer.setScissorTest( false );
 
+				stats.update();
+
 			}
 
 			//

examples/webgl_loader_3dm.html

@@ -54,7 +54,6 @@
 			let controls, gui;
 
 			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 );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -87,11 +87,11 @@
 
 				}, function ( progress ) {
 
-					console.log ( ( progress.loaded / progress.total * 100 ) + '%' );
+					console.log( ( progress.loaded / progress.total * 100 ) + '%' );
 
 				}, function ( error ) {
 
-					console.log ( error );
+					console.log( error );
 
 				} );
 
@@ -118,8 +118,6 @@
 				controls.update();
 				renderer.render( scene, camera );
 
-				requestAnimationFrame( animate );
-
 			}
 
 			function initGUI( layers ) {

examples/webgl_loader_3ds.html

@@ -32,7 +32,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -74,6 +73,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 = new TrackballControls( camera, renderer.domElement );
@@ -96,8 +96,6 @@
 				controls.update();
 				renderer.render( scene, camera );
 
-				requestAnimationFrame( animate );
-
 			}
 		</script>
 

examples/webgl_loader_bvh.html

@@ -43,7 +43,6 @@
 			let mixer;
 
 			init();
-			animate();
 
 			const loader = new BVHLoader();
 			loader.load( 'models/bvh/pirouette.bvh', function ( result ) {
@@ -73,6 +72,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 );
 
 				controls = new OrbitControls( camera, renderer.domElement );
@@ -94,8 +94,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );

examples/webgl_loader_collada.html

@@ -35,7 +35,6 @@
 			let camera, scene, renderer, elf;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -80,6 +79,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -104,8 +104,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_loader_collada_kinematics.html

@@ -61,7 +61,6 @@
 				kinematics = collada.kinematics;
 
 				init();
-				animate();
 
 			} );
 
@@ -92,6 +91,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();
@@ -172,11 +172,9 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
+				TWEEN.update();
 				render();
 				stats.update();
-				TWEEN.update();
 
 			}
 

examples/webgl_loader_collada_skinning.html

@@ -36,7 +36,6 @@
 			let camera, scene, renderer, mixer;
 
 			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 );
 
 				//
@@ -116,8 +116,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_loader_draco.html

@@ -38,7 +38,6 @@
 		dracoLoader.setDecoderConfig( { type: 'js' } );
 
 		init();
-		animate();
 
 		function init() {
 
@@ -90,6 +89,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			renderer.shadowMap.enabled = true;
 			container.appendChild( renderer.domElement );
 
@@ -108,13 +108,6 @@
 
 		function animate() {
 
-			render();
-			requestAnimationFrame( animate );
-
-		}
-
-		function render() {
-
 			const timer = Date.now() * 0.0003;
 
 			camera.position.x = Math.sin( timer ) * 0.5;

examples/webgl_loader_fbx.html

@@ -38,7 +38,6 @@
 			let mixer;
 
 			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 );
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -133,8 +133,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );

examples/webgl_loader_fbx_nurbs.html

@@ -33,7 +33,6 @@
 			let camera, scene, renderer, stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -64,6 +63,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -87,8 +87,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
 				stats.update();

examples/webgl_loader_gltf_iridescence.html

@@ -42,7 +42,7 @@
 			async function init() {
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setAnimationLoop( render );
+				renderer.setAnimationLoop( animate );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -80,8 +80,6 @@
 
 				scene.add( gltf.scene );
 
-				render();
-
 				window.addEventListener( 'resize', onWindowResize );
 
 			}
@@ -94,11 +92,9 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				render();
-
 			}
 
-			function render() {
+			function animate() {
 
 				controls.update();
 				renderer.render( scene, camera );

examples/webgl_loader_gltf_sheen.html

@@ -40,7 +40,6 @@
 			let camera, scene, renderer, controls;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -72,6 +71,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
 				container.appendChild( renderer.domElement );
@@ -106,16 +106,8 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update(); // required if damping enabled
 
-				render();
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_loader_gltf_transmission.html

@@ -77,9 +77,9 @@
 					} );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setAnimationLoop( render );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
 				container.appendChild( renderer.domElement );
@@ -108,7 +108,7 @@
 
 			//
 
-			function render() {
+			function animate() {
 
 				if ( mixer ) mixer.update( clock.getDelta() );
 

examples/webgl_loader_imagebitmap.html

@@ -28,7 +28,6 @@
 			let group, cubes;
 
 			init();
-			animate();
 
 			function addImageBitmap() {
 
@@ -114,6 +113,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				// TESTS
@@ -146,8 +146,6 @@
 
 				renderer.render( scene, camera );
 
-				requestAnimationFrame( animate );
-
 			}
 
 		</script>

examples/webgl_loader_ldraw.html

@@ -69,8 +69,6 @@
 			};
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -85,6 +83,7 @@
 				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 );
 
@@ -321,7 +320,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				controls.update();
 				render();
 

examples/webgl_loader_lwo.html

@@ -77,7 +77,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;
 				container.appendChild( renderer.domElement );
 
@@ -98,7 +98,7 @@
 
 			}
 
-			function animation() {
+			function animate() {
 
 				renderer.render( scene, camera );
 

examples/webgl_loader_md2.html

@@ -55,7 +55,6 @@
 			let stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -121,6 +120,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -324,7 +324,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				render();
 
 				stats.update();

examples/webgl_loader_md2_control.html

@@ -64,7 +64,6 @@
 			const clock = new THREE.Clock();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -130,6 +129,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -306,7 +306,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				render();
 
 				stats.update();

examples/webgl_loader_mdd.html

@@ -61,8 +61,6 @@
 					mixer = new THREE.AnimationMixer( mesh );
 					mixer.clipAction( clip ).play(); // use clip
 
-					animate();
-
 				} );
 
 				//
@@ -70,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 );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -87,8 +86,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );

examples/webgl_loader_mmd.html

@@ -60,7 +60,6 @@
 				Ammo = AmmoLib;
 
 				init();
-				animate();
 
 			} );
 
@@ -94,6 +93,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				effect = new OutlineEffect( renderer );
@@ -221,8 +221,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_loader_mmd_audio.html

@@ -62,7 +62,6 @@
 				Ammo().then( function () {
 
 					init();
-					animate();
 
 				} );
 
@@ -101,6 +100,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				effect = new OutlineEffect( renderer );
@@ -177,13 +177,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
 				if ( ready ) {
 
 					helper.update( clock.getDelta() );

examples/webgl_loader_mmd_pose.html

@@ -56,7 +56,6 @@
 				Ammo = AmmoLib;
 
 				init();
-				animate();
 
 			} );
 
@@ -85,6 +84,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				effect = new OutlineEffect( renderer );
@@ -288,13 +288,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
 				effect.render( scene, camera );
 
 			}

examples/webgl_loader_nrrd.html

@@ -41,7 +41,6 @@
 				renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -150,6 +149,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 );
 
 				controls = new TrackballControls( camera, renderer.domElement );
@@ -181,8 +181,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 
 				renderer.render( scene, camera );

examples/webgl_loader_obj.html

@@ -34,7 +34,6 @@
 
 			init();
 
-
 			function init() {
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );

examples/webgl_loader_obj_mtl.html

@@ -32,8 +32,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -88,6 +86,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 );
 
 				//
@@ -115,7 +114,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_loader_pdb.html

@@ -68,7 +68,6 @@
 			const offset = new THREE.Vector3();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -95,6 +94,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
 				labelRenderer = new CSS2DRenderer();
@@ -219,8 +219,6 @@
 
 					}
 
-					render();
-
 				} );
 
 			}
@@ -235,13 +233,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				labelRenderer.setSize( window.innerWidth, window.innerHeight );
 
-				render();
-
 			}
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				controls.update();
 
 				const time = Date.now() * 0.0004;

examples/webgl_loader_ply.html

@@ -35,7 +35,6 @@
 			let camera, cameraTarget, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -118,6 +117,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				renderer.shadowMap.enabled = true;
 
@@ -169,8 +169,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_loader_stl.html

@@ -35,7 +35,6 @@
 			let camera, cameraTarget, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -154,6 +153,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				renderer.shadowMap.enabled = true;
 
@@ -202,8 +202,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_loader_texture_dds.html

@@ -32,7 +32,6 @@
 			const meshes = [];
 
 			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 );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -227,8 +227,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = Date.now() * 0.001;
 
 				for ( let i = 0; i < meshes.length; i ++ ) {

examples/webgl_loader_texture_hdrjpg.html

@@ -75,7 +75,6 @@
 			const resolutions = {};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -166,6 +165,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -236,9 +236,7 @@
 			}
 
 			function animate() {
-
-				requestAnimationFrame( animate );
-
+			
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_loader_texture_ktx.html

@@ -46,13 +46,13 @@
 	const meshes = [];
 
 	init();
-	animate();
 
 	function init() {
 
 		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 formats = {
@@ -165,8 +165,6 @@
 
 	function animate() {
 
-		requestAnimationFrame( animate );
-
 		const time = Date.now() * 0.001;
 
 		for ( let i = 0; i < meshes.length; i ++ ) {

examples/webgl_loader_texture_ktx2.html

@@ -72,7 +72,7 @@
 				sample: Object.values( SAMPLES )[ 0 ],
 			};
 
-			init().then( animate );
+			init();
 
 			async function init() {
 
@@ -116,13 +116,12 @@
 
 				await loadTexture( params.sample );
 
+				renderer.setAnimationLoop( animate );
 
 			}
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 
 				renderer.render( scene, camera );

examples/webgl_loader_texture_lottie.html

@@ -33,7 +33,6 @@
 			let mesh;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -62,6 +61,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				const environment = new RoomEnvironment( renderer );
@@ -125,8 +125,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				if ( mesh ) {
 
 					mesh.rotation.y -= 0.001;

examples/webgl_loader_texture_pvrtc.html

@@ -31,7 +31,6 @@
 			const meshes = [];
 
 			init();
-			animate();
 
 			function init() {
 
@@ -162,6 +161,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 );
@@ -179,8 +179,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = Date.now() * 0.001;
 
 				for ( let i = 0; i < meshes.length; i ++ ) {

examples/webgl_loader_texture_tga.html

@@ -32,7 +32,6 @@
 			let camera, scene, renderer, stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -85,6 +84,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -115,16 +115,8 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
+				stats.update();
 
 			}
 

examples/webgl_loader_ttf.html

@@ -54,7 +54,6 @@
 			let windowHalfX = window.innerWidth / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -114,6 +113,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				// EVENTS
@@ -281,8 +281,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 
 				camera.lookAt( cameraTarget );