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

examples/games_fps.html

@@ -71,6 +71,7 @@
 			const 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.VSMShadowMap;
 			renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -442,9 +443,7 @@
 						helper.visible = value;
 
 					} );
-
-				animate();
-
+			
 			} );
 
 			function teleportPlayerIfOob() {
@@ -485,8 +484,6 @@
 
 				stats.update();
 
-				requestAnimationFrame( animate );
-
 			}
 
 		</script>

examples/misc_animation_groups.html

@@ -31,7 +31,6 @@
 			let scene, camera, renderer, mixer;
 
 			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 );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -125,14 +125,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) {

examples/misc_animation_keys.html

@@ -31,7 +31,6 @@
 			let scene, camera, renderer, mixer;
 
 			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 );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -125,14 +125,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) {

examples/misc_boxselection.html

@@ -51,7 +51,6 @@
 			let camera, scene, renderer;
 
 			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 );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 
@@ -131,19 +131,12 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
+				renderer.render( scene, camera );
 
-				render();
 				stats.update();
 
 			}
 
-			function render() {
-
-				renderer.render( scene, camera );
-
-			}
-
 			const selectionBox = new SelectionBox( camera, scene );
 			const helper = new SelectionHelper( renderer, 'selectBox' );
 

examples/misc_controls_fly.html

@@ -73,7 +73,6 @@
 			const clock = new THREE.Clock();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -201,6 +200,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -249,8 +249,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/misc_controls_map.html

@@ -42,8 +42,7 @@
 			let camera, controls, scene, renderer;
 
 			init();
-			//render(); // remove when using next line for animation loop (requestAnimationFrame)
-			animate();
+			//render(); // remove when using animation loop
 
 			function init() {
 
@@ -54,6 +53,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 );
@@ -131,8 +131,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
 
 				render();

examples/misc_controls_orbit.html

@@ -40,8 +40,7 @@
 			let camera, controls, scene, renderer;
 
 			init();
-			//render(); // remove when using next line for animation loop (requestAnimationFrame)
-			animate();
+			//render(); // remove when using animation loop
 
 			function init() {
 
@@ -52,6 +51,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 );
@@ -121,8 +121,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
 
 				render();

examples/misc_controls_pointerlock.html

@@ -76,7 +76,6 @@
 			const color = new THREE.Color();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -260,6 +259,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 );
-
 				const time = performance.now();
 
 				if ( controls.isLocked === true ) {

examples/misc_controls_trackball.html

@@ -49,7 +49,6 @@
 			const frustumSize = 400;
 
 			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 );
 
 				stats = new Stats();
@@ -157,14 +157,12 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 
-				stats.update();
-
 				render();
 
+				stats.update();
+
 			}
 
 			function render() {

examples/misc_exporter_draco.html

@@ -37,7 +37,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -91,6 +90,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -123,7 +123,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

examples/misc_exporter_exr.html

@@ -39,13 +39,13 @@
 			};
 
 			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 );
 
 				//
@@ -109,7 +109,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				controls.update();
 				renderer.render( scene, camera );
 

examples/misc_exporter_gltf.html

@@ -114,7 +114,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -464,6 +463,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;
 
@@ -572,14 +572,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const timer = Date.now() * 0.0001;
 
 				camera.position.x = Math.cos( timer ) * 800;
@@ -590,6 +582,8 @@
 
 			}
 
+
+
 		</script>
 
 	</body>

examples/misc_exporter_obj.html

@@ -41,13 +41,13 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				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( 70, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -240,8 +240,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
 			}

examples/misc_exporter_ply.html

@@ -37,7 +37,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -103,6 +102,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -136,7 +136,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

examples/misc_exporter_stl.html

@@ -36,7 +36,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -91,6 +90,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -123,7 +123,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

examples/misc_lookat.html

@@ -46,8 +46,6 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove );
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -79,6 +77,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();
@@ -113,8 +112,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/physics_ammo_break.html

@@ -86,7 +86,6 @@
 			Ammo = AmmoLib;
 
 			init();
-			animate();
 
 		} );
 
@@ -119,6 +118,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 );
 
@@ -431,8 +431,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			render();
 			stats.update();
 

examples/physics_ammo_cloth.html

@@ -55,7 +55,6 @@
 				Ammo = AmmoLib;
 
 				init();
-				animate();
 
 			} );
 
@@ -86,6 +85,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 );
 
@@ -396,8 +396,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/physics_ammo_instancing.html

@@ -119,6 +119,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -131,8 +132,6 @@
 				controls.target.y = 0.5;
 				controls.update();
 
-				animate();
-
 				setInterval( () => {
 
 					let index = Math.floor( Math.random() * boxes.count );
@@ -153,8 +152,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
 				stats.update();

examples/physics_ammo_rope.html

@@ -59,7 +59,6 @@
 			Ammo = AmmoLib;
 
 			init();
-			animate();
 
 		} );
 
@@ -89,6 +88,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 );
 
@@ -419,8 +419,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			render();
 			stats.update();
 

examples/physics_ammo_terrain.html

@@ -72,7 +72,6 @@
 				Ammo = AmmoLib;
 
 				init();
-				animate();
 
 			} );
 
@@ -93,6 +92,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 );
 
@@ -391,8 +391,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/physics_ammo_volume.html

@@ -63,7 +63,6 @@
 				Ammo = AmmoLib;
 
 				init();
-				animate();
 
 			} );
 
@@ -93,6 +92,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 );
 
@@ -414,8 +414,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/physics_jolt_instancing.html

@@ -117,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;
 				document.body.appendChild( renderer.domElement );
 
@@ -129,8 +130,6 @@
 				controls.target.y = 0.5;
 				controls.update();
 
-				animate();
-
 				setInterval( () => {
 
 					let index = Math.floor( Math.random() * boxes.count );
@@ -151,8 +150,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
 				stats.update();

examples/physics_rapier_instancing.html

@@ -117,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;
 				document.body.appendChild( renderer.domElement );
 
@@ -129,8 +130,6 @@
 				controls.target.y = 0.5;
 				controls.update();
 
-				animate();
-
 				setInterval( () => {
 
 					let index = Math.floor( Math.random() * boxes.count );
@@ -151,8 +150,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
 				stats.update();

examples/webaudio_orientation.html

@@ -131,7 +131,8 @@
 
 				boomBox.add( positionalAudio );
 				scene.add( boomBox );
-				animate();
+		
+				renderer.setAnimationLoop( animate );
 
 			} );
 
@@ -179,7 +180,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
 			renderer.render( scene, camera );
 
 		}

examples/webaudio_sandbox.html

@@ -214,6 +214,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 );
 
 				//
@@ -228,8 +229,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				animate();
-
 			}
 
 			function onWindowResize() {
@@ -245,14 +244,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-
-			function render() {
-
 				const delta = clock.getDelta();
 
 				controls.update( delta );

examples/webaudio_timing.html

@@ -130,7 +130,7 @@
 
 				}
 
-				animate();
+				renderer.setAnimationLoop( animate );
 
 			} );
 
@@ -165,14 +165,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
-			render();
-
-		}
-
-		function render() {
-
 			const time = clock.getElapsedTime();
 
 			for ( let i = 0; i < objects.length; i ++ ) {

examples/webaudio_visualizer.html

@@ -82,11 +82,6 @@
 
 				const container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
 				scene = new THREE.Scene();
 
 				camera = new THREE.Camera();
@@ -142,9 +137,15 @@
 
 				//
 
-				window.addEventListener( 'resize', onWindowResize );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				container.appendChild( renderer.domElement );
 
-				animate();
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
 
 			}
 
@@ -156,14 +157,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				analyser.getFrequencyData();
 
 				uniforms.tAudioData.value.needsUpdate = true;

examples/webgl_animation_keyframes.html

@@ -91,7 +91,7 @@
 				mixer = new THREE.AnimationMixer( model );
 				mixer.clipAction( gltf.animations[ 0 ] ).play();
 
-				animate();
+				renderer.setAnimationLoop( animate );
 
 			}, undefined, function ( e ) {
 
@@ -112,8 +112,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				mixer.update( delta );

examples/webgl_animation_multiple.html

@@ -39,7 +39,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 );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -237,8 +237,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				for ( const mixer of mixers ) mixer.update( delta );

examples/webgl_animation_skinning_additive_blending.html

@@ -148,7 +148,7 @@
 
 					createPanel();
 
-					animate();
+					renderer.setAnimationLoop( animate );
 
 				} );
 
@@ -394,8 +394,6 @@
 
 				// Render loop
 
-				requestAnimationFrame( animate );
-
 				for ( let i = 0; i !== numAnimations; ++ i ) {
 
 					const action = allActions[ i ];
@@ -413,10 +411,10 @@
 
 				mixer.update( mixerUpdateDelta );
 
-				stats.update();
-
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_animation_skinning_blending.html

@@ -126,7 +126,7 @@
 
 					activateAllActions();
 
-					animate();
+					renderer.setAnimationLoop( animate );
 
 				} );
 
@@ -466,10 +466,6 @@
 
 			function animate() {
 
-				// Render loop
-
-				requestAnimationFrame( animate );
-
 				idleWeight = idleAction.getEffectiveWeight();
 				walkWeight = walkAction.getEffectiveWeight();
 				runWeight = runAction.getEffectiveWeight();
@@ -499,10 +495,10 @@
 
 				mixer.update( mixerUpdateDelta );
 
-				stats.update();
-
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_animation_skinning_ik.html

@@ -48,7 +48,7 @@
 		let stats, gui, conf;
 		const v0 = new THREE.Vector3();
 
-		init().then( animate );
+		init();
 
 		async function init() {
 
@@ -70,19 +70,6 @@
 			const ambientLight = new THREE.AmbientLight( 0xffffff, 8 ); // soft white light
 			scene.add( ambientLight );
 
-			renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			document.body.appendChild( renderer.domElement );
-
-			stats = new Stats();
-			document.body.appendChild( stats.dom );
-
-			orbitControls = new OrbitControls( camera, renderer.domElement );
-			orbitControls.minDistance = 0.2;
-			orbitControls.maxDistance = 1.5;
-			orbitControls.enableDamping = true;
-
 			const dracoLoader = new DRACOLoader();
 			dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
 			const gltfLoader = new GLTFLoader();
@@ -103,7 +90,7 @@
 			} );
 			scene.add( gltf.scene );
 
-			orbitControls.target.copy( OOI.sphere.position ); // orbit controls lookAt the sphere
+			const targetPosition = OOI.sphere.position.clone(); // for orbit controls
 			OOI.hand_l.attach( OOI.sphere );
 
 			// mirror sphere cube-camera
@@ -113,17 +100,6 @@
 			const mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: cubeRenderTarget.texture } );
 			OOI.sphere.material = mirrorSphereMaterial;
 
-			transformControls = new TransformControls( camera, renderer.domElement );
-			transformControls.size = 0.75;
-			transformControls.showX = false;
-			transformControls.space = 'world';
-			transformControls.attach( OOI.target_hand_l );
-			scene.add( transformControls );
-
-			// disable orbitControls while using transformControls
-			transformControls.addEventListener( 'mouseDown', () => orbitControls.enabled = false );
-			transformControls.addEventListener( 'mouseUp', () => orbitControls.enabled = true );
-
 			OOI.kira.add( OOI.kira.skeleton.bones[ 0 ] );
 			const iks = [
 				{
@@ -154,6 +130,38 @@
 			gui.add( conf, 'update' ).name( 'IK manual update()' );
 			gui.open();
 
+			//
+
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
+			document.body.appendChild( renderer.domElement );
+
+			//
+
+			orbitControls = new OrbitControls( camera, renderer.domElement );
+			orbitControls.minDistance = 0.2;
+			orbitControls.maxDistance = 1.5;
+			orbitControls.enableDamping = true;
+			orbitControls.target.copy( targetPosition );
+
+			transformControls = new TransformControls( camera, renderer.domElement );
+			transformControls.size = 0.75;
+			transformControls.showX = false;
+			transformControls.space = 'world';
+			transformControls.attach( OOI.target_hand_l );
+			scene.add( transformControls );
+
+			// disable orbitControls while using transformControls
+			transformControls.addEventListener( 'mouseDown', () => orbitControls.enabled = false );
+			transformControls.addEventListener( 'mouseUp', () => orbitControls.enabled = true );
+
+			//
+
+			stats = new Stats();
+			document.body.appendChild( stats.dom );
+
 			window.addEventListener( 'resize', onWindowResize, false );
 
 		}
@@ -197,8 +205,6 @@
 
 			stats.update(); // fps stats
 
-			requestAnimationFrame( animate );
-
 		}
 
 		function updateIK() {

examples/webgl_animation_skinning_morph.html

@@ -58,7 +58,6 @@
 			const api = { state: 'Walking' };
 
 			init();
-			animate();
 
 			function init() {
 
@@ -115,6 +114,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -256,8 +256,6 @@
 
 				if ( mixer ) mixer.update( dt );
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
 				stats.update();

examples/webgl_buffergeometry.html

@@ -167,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 );
 
 				//
@@ -193,15 +194,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
@@ -209,6 +201,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_compression.html

@@ -32,8 +32,6 @@
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			const statsEnabled = true;
-
 			let container, stats, gui;
 
 			let camera, scene, renderer, controls;
@@ -70,8 +68,6 @@
 
 			//
 			init();
-			animate();
-
 
 			function init() {
 
@@ -80,11 +76,6 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
 				//
 
 				scene = new THREE.Scene();
@@ -92,10 +83,6 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.setScalar( 2 * radius );
 
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.enablePan = false;
-				controls.enableZoom = false;
-
 				//
 
 				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
@@ -190,12 +177,22 @@
 
 				//
 
-				if ( statsEnabled ) {
+				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 OrbitControls( camera, renderer.domElement );
+				controls.enablePan = false;
+				controls.enableZoom = false;
 
-					stats = new Stats();
-					container.appendChild( stats.dom );
+				//
 
-				}
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -217,11 +214,9 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.render( scene, camera );
 
-				if ( statsEnabled ) stats.update();
+				stats.update();
 
 			}
 

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -68,7 +68,6 @@
 			const particles = 100000;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -132,6 +131,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 );
@@ -156,15 +156,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = Date.now() * 0.005;
 
 				particleSystem.rotation.z = 0.01 * time;
@@ -181,6 +172,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_drawrange.html

@@ -57,7 +57,6 @@
 			};
 
 			init();
-			animate();
 
 			function initGUI() {
 
@@ -174,7 +173,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -275,10 +274,9 @@
 
 				pointCloud.geometry.attributes.position.needsUpdate = true;
 
-				requestAnimationFrame( animate );
+				render();
 
 				stats.update();
-				render();
 
 			}
 

examples/webgl_buffergeometry_glbufferattribute.html

@@ -44,9 +44,10 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -128,9 +129,7 @@
 
 				points = new THREE.Points( geometry, material );
 
-				// Choose one:
-				// geometry.boundingSphere = ( new THREE.Sphere() ).set( new THREE.Vector3(), Infinity );
-				points.frustumCulled = false;
+				geometry.boundingSphere = new THREE.Sphere().set( new THREE.Vector3(), 500 );
 
 				scene.add( points );
 
@@ -158,15 +157,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				drawCount = ( Math.max( 5000, drawCount ) + Math.floor( 500 * Math.random() ) ) % particles;
 				points.geometry.setDrawRange( 0, drawCount );
 
@@ -177,6 +167,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_indexed.html

@@ -32,7 +32,6 @@
 			let mesh;
 
 			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 );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -163,15 +163,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
@@ -179,6 +170,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_instancing.html

@@ -86,7 +86,6 @@
 		let camera, scene, renderer;
 
 		init();
-		animate();
 
 		function init() {
 
@@ -177,6 +176,7 @@
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			container.appendChild( renderer.domElement );
 
 			//
@@ -208,15 +208,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
-			render();
-			stats.update();
-
-		}
-
-		function render() {
-
 			const time = performance.now();
 
 			const object = scene.children[ 0 ];
@@ -227,6 +218,8 @@
 
 			renderer.render( scene, camera );
 
+			stats.update();
+
 		}
 
 	</script>

examples/webgl_buffergeometry_instancing_billboards.html

@@ -89,6 +89,8 @@
 		let camera, scene, renderer;
 		let geometry, material, mesh;
 
+		init();
+
 		function init() {
 
 			container = document.createElement( 'div' );
@@ -137,6 +139,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();
@@ -159,15 +162,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
-			render();
-			stats.update();
-
-		}
-
-		function render() {
-
 			const time = performance.now() * 0.0005;
 
 			material.uniforms[ 'time' ].value = time;
@@ -177,13 +171,10 @@
 
 			renderer.render( scene, camera );
 
-		}
-
-		if ( init() ) {
-
-			animate();
+			stats.update();
 
 		}
+
 	</script>
 
 </body>

examples/webgl_buffergeometry_instancing_interleaved.html

@@ -40,7 +40,6 @@
 		const currentM = new THREE.Matrix4();
 
 		init();
-		animate();
 
 		function init() {
 
@@ -163,6 +162,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();
@@ -185,15 +185,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
-			render();
-			stats.update();
-
-		}
-
-		function render() {
-
 			const time = performance.now();
 
 			mesh.rotation.y = time * 0.00005;
@@ -217,6 +208,8 @@
 
 			renderer.render( scene, camera );
 
+			stats.update();
+
 		}
 
 	</script>

examples/webgl_buffergeometry_lines.html

@@ -37,7 +37,6 @@
 			let t = 0;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -90,6 +89,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -117,15 +117,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const delta = clock.getDelta();
 				const time = clock.getElapsedTime();
 
@@ -137,6 +128,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 			function generateMorphTargets( geometry ) {

examples/webgl_buffergeometry_lines_indexed.html

@@ -34,7 +34,6 @@
 			let parent_node;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -193,6 +192,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -220,21 +220,14 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = Date.now() * 0.001;
 
 				parent_node.rotation.z = time * 0.5;
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_points.html

@@ -100,6 +100,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -127,15 +128,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = Date.now() * 0.001;
 
 				points.rotation.x = time * 0.25;
@@ -143,6 +135,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_points_interleaved.html

@@ -33,7 +33,6 @@
 			let points;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -114,6 +113,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				container.appendChild( renderer.domElement );
 
@@ -141,15 +141,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = Date.now() * 0.001;
 
 				points.rotation.x = time * 0.25;
@@ -157,6 +148,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_rawshader.html

@@ -77,7 +77,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -141,6 +140,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();
@@ -163,15 +163,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = performance.now();
 
 				const object = scene.children[ 0 ];
@@ -181,6 +172,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_selective_draw.html

@@ -68,14 +68,9 @@
 			let numLinesCulled = 0;
 
 			init();
-			animate();
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
 
@@ -95,6 +90,12 @@
 				const showAllLinesButton = document.getElementById( 'showAllLines' );
 				showAllLinesButton.addEventListener( 'click', showAllLines );
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
 			}
 
 			function addLines( radius ) {
@@ -219,16 +220,15 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
 				mesh.rotation.y = time * 0.5;
 
-				stats.update();
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl_buffergeometry_uint.html

@@ -33,7 +33,6 @@
 			let mesh;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -166,6 +165,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -192,15 +192,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
@@ -208,6 +199,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>