Examples: Subset MPLUSRounded1c font in webgl_geometry_text_stroke. (#33743)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

examples/webgl_geometry_text_stroke.html

@@ -39,8 +39,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
-			import { Font } from 'three/addons/loaders/FontLoader.js';
-			import { unzipSync, strFromU8 } from 'three/addons/libs/fflate.module.js';
+			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 
 			let camera, scene, renderer;
 
@@ -54,59 +53,54 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				new THREE.FileLoader()
-					.setResponseType( 'arraybuffer' )
-					.load( 'fonts/MPLUSRounded1c/MPLUSRounded1c-Regular.typeface.json.zip', function ( data ) {
+				const loader = new FontLoader();
+				loader.load( 'fonts/MPLUSRounded1c/MPLUSRounded1c-Regular.typeface.json', function ( font ) {
 
-						const zip = unzipSync( new Uint8Array( data ) );
-						const strArray = strFromU8( new Uint8Array( zip[ 'MPLUSRounded1c-Regular.typeface.json' ].buffer ) );
+					const color = new THREE.Color( 0x006699 );
 
-						const font = new Font( JSON.parse( strArray ) );
-						const color = new THREE.Color( 0x006699 );
+					const matDark = new THREE.MeshBasicMaterial( {
+						color: color,
+						side: THREE.DoubleSide
+					} );
 
-						const matDark = new THREE.MeshBasicMaterial( {
-							color: color,
-							side: THREE.DoubleSide
-						} );
+					const matLite = new THREE.MeshBasicMaterial( {
+						color: color,
+						transparent: true,
+						opacity: 0.4,
+						side: THREE.DoubleSide
+					} );
 
-						const matLite = new THREE.MeshBasicMaterial( {
-							color: color,
-							transparent: true,
-							opacity: 0.4,
-							side: THREE.DoubleSide
-						} );
+					const material = {
+						dark: matDark,
+						lite: matLite,
+						color: color
+					};
 
-						const material = {
-							dark: matDark,
-							lite: matLite,
-							color: color
-						};
+					const english = '   Three.js\nStroke text.'; // Left to right
 
-						const english = '   Three.js\nStroke text.'; // Left to right
+					const hebrew = 'טקסט קו'; // Right to left
 
-						const hebrew = 'טקסט קו'; // Right to left
+					const chinese = '文字描邊'; // Top to bottom
 
-						const chinese = '文字描邊'; // Top to bottom
+					const message1 = generateStrokeText( font, material, english, 80, 'ltr' );
 
-						const message1 = generateStrokeText( font, material, english, 80, 'ltr' );
+					const message2 = generateStrokeText( font, material, hebrew, 80, 'rtl' );
 
-						const message2 = generateStrokeText( font, material, hebrew, 80, 'rtl' );
+					const message3 = generateStrokeText( font, material, chinese, 80, 'tb' );
 
-						const message3 = generateStrokeText( font, material, chinese, 80, 'tb' );
+					message1.position.x = - 100;
 
-						message1.position.x = - 100;
+					message2.position.x = - 100;
+					message2.position.y = - 300;
 
-						message2.position.x = - 100;
-						message2.position.y = - 300;
+					message3.position.x = 300;
+					message3.position.y = - 300;
 
-						message3.position.x = 300;
-						message3.position.y = - 300;
+					scene.add( message1, message2, message3 );
 
-						scene.add( message1, message2, message3 );
+					render();
 
-						render();
-
-					} ); //end load function
+				} ); //end load function
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );