Use gltf extension plugin in demos (#886)

* Update demos * README update
NASA-AMMOS · Dec 21, 2024 · 22d5584 · 22d5584
1 parent 2f241f4
commit 22d5584
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -111,7 +111,7 @@ Setting up a 3D Tile Set using a custom material.
 const tilesRenderer = new TilesRenderer( './path/to/tileset.json' );
 tilesRenderer.setCamera( camera );
 tilesRenderer.setResolutionFromRenderer( camera, renderer );
-tilesRenderer.onLoadModel = function ( scene ) {
+tilesRenderer.addEventListener( 'load-model', ( { scene } ) => {
 
 	// create a custom material for the tile
 	scene.traverse( c => {
@@ -127,7 +127,7 @@ tilesRenderer.onLoadModel = function ( scene ) {
 
 };
 
-tilesRenderer.onDisposeModel = function ( scene ) {
+tilesRenderer.addEventListener( 'dispose-model', ( { scene } ) => {
 
 	// dispose of any manually created materials
 	scene.traverse( c => {
@@ -170,8 +170,7 @@ scene.add( tilesRenderer2.group );
 
 ## Adding DRACO Decompression Support
 
-Adding support for DRACO decompression within the GLTF files that are transported in B3DM and I3DM formats. The same approach can be used to add support for KTX2 and DDS textures.
-There are different builds of the draco decoder, pick the appropriate one depending on your model type. [More info](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/libs/draco)
+Adding support for DRACO decompression within the GLTF files that are transported in B3DM and I3DM formats. The same approach can be used to add support for KTX2 and DDS textures. Alternatively the [GLTFExtensionsPlugin](./src/plugins/README.md#gltfextensionsplugin) can be used to simplify the setup.
 
 ```js
 
@@ -189,7 +188,7 @@ loader.setDRACOLoader( dracoLoader );
 tilesRenderer.manager.addHandler( /\.(gltf|glb)$/g, loader );
 ```
 
-Adding support for DRACO decompression within the PNTS files.
+Adding support for DRACO decompression within the PNTS files requires a different draco decoder. See more info [here](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/libs/draco).
 
 ```js
 

diff --git a/example/googleMapsAerial.js b/example/googleMapsAerial.js
@@ -1,13 +1,12 @@
 import { GeoUtils, WGS84_ELLIPSOID, TilesRenderer } from '3d-tiles-renderer';
-import { GoogleCloudAuthPlugin, TilesFadePlugin, TileCompressionPlugin } from '3d-tiles-renderer/plugins';
+import { GoogleCloudAuthPlugin, TilesFadePlugin, TileCompressionPlugin, GLTFExtensionsPlugin } from '3d-tiles-renderer/plugins';
 import {
 	Scene,
 	WebGLRenderer,
 	PerspectiveCamera,
 	Raycaster,
 	MathUtils,
 } from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -45,6 +44,12 @@ function reinstantiateTiles() {
 	tiles.registerPlugin( new GoogleCloudAuthPlugin( { apiToken: params.apiKey } ) );
 	tiles.registerPlugin( new TileCompressionPlugin() );
 	tiles.registerPlugin( new TilesFadePlugin() );
+	tiles.registerPlugin( new GLTFExtensionsPlugin( {
+		// Note the DRACO compression files need to be supplied via an explicit source.
+		// We use unpkg here but in practice should be provided by the application.
+		dracoLoader: new DRACOLoader().setDecoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/' )
+	} ) );
+
 	// tiles.setLatLonToYUp( 35.3606 * MathUtils.DEG2RAD, 138.7274 * MathUtils.DEG2RAD ); // Mt Fuji
 	// tiles.setLatLonToYUp( 48.8584 * MathUtils.DEG2RAD, 2.2945 * MathUtils.DEG2RAD ); // Eiffel Tower
 	// tiles.setLatLonToYUp( 41.8902 * MathUtils.DEG2RAD, 12.4922 * MathUtils.DEG2RAD ); // Colosseum
@@ -54,15 +59,6 @@ function reinstantiateTiles() {
 	// tiles.setLatLonToYUp( 34.9947 * MathUtils.DEG2RAD, 135.7847 * MathUtils.DEG2RAD ); // Kiyomizu-dera
 	tiles.setLatLonToYUp( 35.6586 * MathUtils.DEG2RAD, 139.7454 * MathUtils.DEG2RAD ); // Tokyo Tower
 
-	// Note the DRACO compression files need to be supplied via an explicit source.
-	// We use unpkg here but in practice should be provided by the application.
-	const dracoLoader = new DRACOLoader();
-	dracoLoader.setDecoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/' );
-
-	const loader = new GLTFLoader( tiles.manager );
-	loader.setDRACOLoader( dracoLoader );
-
-	tiles.manager.addHandler( /\.gltf$/, loader );
 	scene.add( tiles.group );
 
 	tiles.setResolutionFromRenderer( camera, renderer );

diff --git a/example/googleMapsExample.js b/example/googleMapsExample.js
@@ -12,6 +12,7 @@ import {
 	UpdateOnChangePlugin,
 	TileCompressionPlugin,
 	UnloadTilesPlugin,
+	GLTFExtensionsPlugin,
 } from '3d-tiles-renderer/plugins';
 import {
 	Scene,
@@ -20,7 +21,6 @@ import {
 	MathUtils,
 	OrthographicCamera,
 } from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
@@ -65,6 +65,12 @@ function reinstantiateTiles() {
 	tiles.registerPlugin( new TileCompressionPlugin() );
 	tiles.registerPlugin( new UpdateOnChangePlugin() );
 	tiles.registerPlugin( new UnloadTilesPlugin() );
+	tiles.registerPlugin( new GLTFExtensionsPlugin( {
+		// Note the DRACO compression files need to be supplied via an explicit source.
+		// We use unpkg here but in practice should be provided by the application.
+		dracoLoader: new DRACOLoader().setDecoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/' )
+	} ) );
+
 
 	if ( params.useBatchedMesh ) {
 
@@ -77,16 +83,6 @@ function reinstantiateTiles() {
 	}
 
 	tiles.group.rotation.x = - Math.PI / 2;
-
-	// Note the DRACO compression files need to be supplied via an explicit source.
-	// We use unpkg here but in practice should be provided by the application.
-	const dracoLoader = new DRACOLoader();
-	dracoLoader.setDecoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/' );
-
-	const loader = new GLTFLoader( tiles.manager );
-	loader.setDRACOLoader( dracoLoader );
-
-	tiles.manager.addHandler( /\.gltf$/, loader );
 	scene.add( tiles.group );
 
 	tiles.setResolutionFromRenderer( transition.camera, renderer );

diff --git a/example/index.js b/example/index.js
@@ -15,7 +15,7 @@ import {
 import {
 	DebugTilesPlugin,
 	ImplicitTilingPlugin,
-	GLTFCesiumRTCExtension,
+	GLTFExtensionsPlugin,
 } from '3d-tiles-renderer/plugins';
 import {
 	Scene,
@@ -37,7 +37,6 @@ import {
 } from 'three';
 import { FlyOrbitControls } from './src/controls/FlyOrbitControls.js';
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
@@ -96,10 +95,6 @@ function reinstantiateTiles() {
 
 	}
 
-	tiles = new TilesRenderer( url );
-	tiles.registerPlugin( new DebugTilesPlugin() );
-	tiles.registerPlugin( new ImplicitTilingPlugin() );
-
 	// Note the DRACO compression files need to be supplied via an explicit source.
 	// We use unpkg here but in practice should be provided by the application.
 	const dracoLoader = new DRACOLoader();
@@ -109,13 +104,16 @@ function reinstantiateTiles() {
 	ktx2loader.setTranscoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/basis/' );
 	ktx2loader.detectSupport( renderer );
 
-	const loader = new GLTFLoader( tiles.manager );
-	loader.setDRACOLoader( dracoLoader );
-	loader.setKTX2Loader( ktx2loader );
-	loader.register( () => new GLTFCesiumRTCExtension() );
+	tiles = new TilesRenderer( url );
+	tiles.registerPlugin( new DebugTilesPlugin() );
+	tiles.registerPlugin( new ImplicitTilingPlugin() );
+	tiles.registerPlugin( new GLTFExtensionsPlugin( {
+		rtc: true,
+		dracoLoader: dracoLoader,
+		ktxLoader: ktx2loader,
+	} ) );
 
 	tiles.fetchOptions.mode = 'cors';
-	tiles.manager.addHandler( /\.gltf$/, loader );
 	geospatialRotationParent.add( tiles.group );
 
 	// Used with CUSTOM_COLOR

diff --git a/example/ionExample.js b/example/ionExample.js
@@ -1,5 +1,5 @@
 import { EnvironmentControls, TilesRenderer } from '3d-tiles-renderer';
-import { CesiumIonAuthPlugin } from '3d-tiles-renderer/plugins';
+import { CesiumIonAuthPlugin, GLTFExtensionsPlugin } from '3d-tiles-renderer/plugins';
 import {
 	Scene,
 	WebGLRenderer,
@@ -10,7 +10,6 @@ import {
 	DataTexture,
 	EquirectangularReflectionMapping
 } from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 
@@ -46,16 +45,12 @@ function rotationBetweenDirections( dir1, dir2 ) {
 function setupTiles() {
 
 	tiles.fetchOptions.mode = 'cors';
+	tiles.registerPlugin( new GLTFExtensionsPlugin( {
+		// Note the DRACO compression files need to be supplied via an explicit source.
+		// We use unpkg here but in practice should be provided by the application.
+		dracoLoader: new DRACOLoader().setDecoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/' )
+	} ) );
 
-	// Note the DRACO compression files need to be supplied via an explicit source.
-	// We use unpkg here but in practice should be provided by the application.
-	const dracoLoader = new DRACOLoader();
-	dracoLoader.setDecoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/' );
-
-	const loader = new GLTFLoader( tiles.manager );
-	loader.setDRACOLoader( dracoLoader );
-
-	tiles.manager.addHandler( /\.gltf$/, loader );
 	scene.add( tiles.group );
 
 }

diff --git a/example/metadata.js b/example/metadata.js
@@ -16,12 +16,10 @@ import {
 	TilesRenderer,
 } from '3d-tiles-renderer';
 import {
-	GLTFMeshFeaturesExtension,
-	GLTFStructuralMetadataExtension,
 	CesiumIonAuthPlugin,
+	GLTFExtensionsPlugin,
 } from '3d-tiles-renderer/plugins';
 import { MeshFeaturesMaterialMixin } from './src/MeshFeaturesMaterial';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import GUI from 'three/examples/jsm/libs/lil-gui.module.min.js';
 
 // FEATURE_IDs
@@ -178,15 +176,11 @@ function reinstantiateTiles() {
 	// create tile set
 	tiles = new TilesRenderer();
 	tiles.registerPlugin( new CesiumIonAuthPlugin( { apiToken: params.accessToken, assetId: params.assetId } ) );
+	tiles.registerPlugin( new GLTFExtensionsPlugin( { metadata: true } ) );
+
 	tiles.setCamera( camera );
 	rotationContainer.add( tiles.group );
 
-	// set up gltf loader to support mesh features and structural metadata
-	const loader = new GLTFLoader( tiles.manager );
-	loader.register( () => new GLTFMeshFeaturesExtension() );
-	loader.register( () => new GLTFStructuralMetadataExtension() );
-	tiles.manager.addHandler( /(gltf|glb)$/g, loader );
-
 	// set up the materials for highlighting features
 	tiles.addEventListener( 'load-model', ( { scene } ) => {