Examples: Add GLTFExporter example for KHR_mesh_quantization (#25354)

* Examples: Add GLTFExporter example for KHR_mesh_quantization.

* Update misc_exporter_gltf.html

Fix CodeQL issue.

---------

Co-authored-by: Michael Herzog <[email protected]>

examples/misc_exporter_gltf.html

@@ -28,8 +28,8 @@
 
 			import * as THREE from 'three';
 
-			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 			import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			function exportGLTF( input ) {
@@ -99,7 +99,7 @@
 			let container;
 
 			let camera, object, object2, material, geometry, scene1, scene2, renderer;
-			let gridHelper, sphere, waltHead;
+			let gridHelper, sphere, model;
 
 			const params = {
 				trs: false,
@@ -109,7 +109,7 @@
 				exportScene1: exportScene1,
 				exportScenes: exportScenes,
 				exportSphere: exportSphere,
-				exportHead: exportHead,
+				exportModel: exportModel,
 				exportObjects: exportObjects,
 				exportSceneObject: exportSceneObject
 			};
@@ -415,19 +415,18 @@
 				scene1.add( object );
 
 				// ---------------------------------------------------------------------
-				//
-				//
-				const loader = new OBJLoader();
-				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
+				// Model requiring KHR_mesh_quantization
+				// ---------------------------------------------------------------------
+				const loader = new GLTFLoader();
+				loader.load( 'models/gltf/ShaderBall.glb', function ( gltf ) {
 
-					waltHead = obj;
-					waltHead.scale.multiplyScalar( 1.5 );
-					waltHead.position.set( 200, - 40, - 200 );
-					scene1.add( waltHead );
+					model = gltf.scene;
+					model.scale.setScalar( 50 );
+					model.position.set( 200, - 40, - 200 );
+					scene1.add( model );
 
 				} );
 
-
 				// ---------------------------------------------------------------------
 				// 2nd THREE.Scene
 				// ---------------------------------------------------------------------
@@ -443,6 +442,9 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.toneMappingExposure = 1;
 
 				container.appendChild( renderer.domElement );
 
@@ -462,7 +464,7 @@
 				h.add( params, 'exportScene1' ).name( 'Export Scene 1' );
 				h.add( params, 'exportScenes' ).name( 'Export Scene 1 and 2' );
 				h.add( params, 'exportSphere' ).name( 'Export Sphere' );
-				h.add( params, 'exportHead' ).name( 'Export Head' );
+				h.add( params, 'exportModel' ).name( 'Export Model' );
 				h.add( params, 'exportObjects' ).name( 'Export Sphere With Grid' );
 				h.add( params, 'exportSceneObject' ).name( 'Export Scene 1 and Object' );
 
@@ -488,9 +490,9 @@
 
 			}
 
-			function exportHead() {
+			function exportModel() {
 
-				exportGLTF( waltHead );
+				exportGLTF( model );
 
 			}
 

examples/webgl_nodes_loader_materialx.html

@@ -109,7 +109,7 @@
 						scene.background = texture;
 						scene.environment = texture;
 
-						prefab = ( await new GLTFLoader().loadAsync( './models/gltf/MaterialX/shaderball.glb' ) ).scene;
+						prefab = ( await new GLTFLoader().loadAsync( './models/gltf/ShaderBall.glb' ) ).scene;
 
 						for ( const sample of samples ) {