Examples: Improved webgl_geometry_text_stroke and webgl_geometry_text_shapes. (#22834)

* Examples: Improved webgl_geometry_text_stroke.

* Examples: Improved webgl_geometry_text_shapes.

examples/webgl_geometry_text_shapes.html

@@ -30,7 +30,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init( ) {
 
@@ -57,7 +56,7 @@
 						side: THREE.DoubleSide
 					} );
 
-					const message = "   Three.js\nSimple text.";
+					const message = '   Three.js\nSimple text.';
 
 					const shapes = font.generateShapes( message, 100 );
 
@@ -116,6 +115,8 @@
 
 					scene.add( lineText );
 
+					render();
+
 				} ); //end load function
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -127,6 +128,8 @@
 				controls.target.set( 0, 0, 0 );
 				controls.update();
 
+				controls.addEventListener( 'change', render );
+
 				window.addEventListener( 'resize', onWindowResize );
 
 			} // end init
@@ -138,12 +141,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-			}
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
 				render();
 
 			}

examples/webgl_geometry_text_stroke.html

@@ -31,7 +31,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init( ) {
 
@@ -58,7 +57,7 @@
 						side: THREE.DoubleSide
 					} );
 
-					const message = "   Three.js\nStroke text.";
+					const message = '   Three.js\nStroke text.';
 
 					const shapes = font.generateShapes( message, 100 );
 
@@ -120,6 +119,8 @@
 
 					scene.add( strokeText );
 
+					render();
+
 				} ); //end load function
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -131,6 +132,8 @@
 				controls.target.set( 0, 0, 0 );
 				controls.update();
 
+				controls.addEventListener( 'change', render );
+
 				window.addEventListener( 'resize', onWindowResize );
 
 			} // end init
@@ -142,12 +145,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-			}
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
 				render();
 
 			}