Revert "Examples: More usage of setAnimationLoop(). (mrdoob#28236)"

This reverts commit b8d79b8.
Mugen87 · May 9, 2024 · 7e32b8f · 7e32b8f
1 parent 94da2af
commit 7e32b8f
Show file tree

Hide file tree

Showing 50 changed files with 355 additions and 156 deletions.
diff --git a/examples/games_fps.html b/examples/games_fps.html
@@ -71,7 +71,6 @@
 			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;
@@ -443,7 +442,9 @@
 						helper.visible = value;
 
 					} );
-
+
+				animate();
+
 			} );
 
 			function teleportPlayerIfOob() {
@@ -484,6 +485,8 @@
 
 				stats.update();
 
+				requestAnimationFrame( animate );
+
 			}
 
 		</script>

diff --git a/examples/misc_animation_groups.html b/examples/misc_animation_groups.html
@@ -31,6 +31,7 @@
 			let scene, camera, renderer, mixer;
 
 			init();
+			animate();
 
 			function init() {
 
@@ -96,7 +97,6 @@
 				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,6 +125,14 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
+
 				const delta = clock.getDelta();
 
 				if ( mixer ) {

diff --git a/examples/misc_animation_keys.html b/examples/misc_animation_keys.html
@@ -31,6 +31,7 @@
 			let scene, camera, renderer, mixer;
 
 			init();
+			animate();
 
 			function init() {
 
@@ -96,7 +97,6 @@
 				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,6 +125,14 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
+
 				const delta = clock.getDelta();
 
 				if ( mixer ) {

diff --git a/examples/misc_boxselection.html b/examples/misc_boxselection.html
@@ -51,6 +51,7 @@
 			let camera, scene, renderer;
 
 			init();
+			animate();
 
 			function init() {
 
@@ -105,7 +106,6 @@
 				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,12 +131,19 @@
 
 			function animate() {
 
-				renderer.render( scene, camera );
+				requestAnimationFrame( animate );
 
+				render();
 				stats.update();
 
 			}
 
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
 			const selectionBox = new SelectionBox( camera, scene );
 			const helper = new SelectionHelper( renderer, 'selectBox' );
 

diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html
@@ -73,6 +73,7 @@
 			const clock = new THREE.Clock();
 
 			init();
+			animate();
 
 			function init() {
 
@@ -200,7 +201,6 @@
 				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,6 +249,8 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
+
 				render();
 				stats.update();
 

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

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

diff --git a/examples/misc_controls_pointerlock.html b/examples/misc_controls_pointerlock.html
@@ -76,6 +76,7 @@
 			const color = new THREE.Color();
 
 			init();
+			animate();
 
 			function init() {
 
@@ -259,7 +260,6 @@
 				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,6 +279,8 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
+
 				const time = performance.now();
 
 				if ( controls.isLocked === true ) {

diff --git a/examples/misc_controls_trackball.html b/examples/misc_controls_trackball.html
@@ -49,6 +49,7 @@
 			const frustumSize = 400;
 
 			init();
+			animate();
 
 			function init() {
 
@@ -99,7 +100,6 @@
 				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,12 +157,14 @@
 
 			function animate() {
 
-				controls.update();
+				requestAnimationFrame( animate );
 
-				render();
+				controls.update();
 
 				stats.update();
 
+				render();
+
 			}
 
 			function render() {

diff --git a/examples/misc_exporter_draco.html b/examples/misc_exporter_draco.html
@@ -37,6 +37,7 @@
 			};
 
 			init();
+			animate();
 
 			function init() {
 
@@ -90,7 +91,6 @@
 				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,6 +123,7 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}

diff --git a/examples/misc_exporter_exr.html b/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,6 +109,7 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
 				controls.update();
 				renderer.render( scene, camera );
 

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

diff --git a/examples/misc_exporter_obj.html b/examples/misc_exporter_obj.html
@@ -41,13 +41,13 @@
 			};
 
 			init();
+			animate();
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer();
 				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,6 +240,8 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
+
 				renderer.render( scene, camera );
 
 			}

diff --git a/examples/misc_exporter_ply.html b/examples/misc_exporter_ply.html
@@ -37,6 +37,7 @@
 			};
 
 			init();
+			animate();
 
 			function init() {
 
@@ -102,7 +103,6 @@
 				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,6 +136,7 @@
 
 			function animate() {
 
+				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}