From 22d55846b35d579d3b11c30cc5fdf70cc27ae67d Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sat, 21 Dec 2024 12:05:19 +0900 Subject: [PATCH] Use gltf extension plugin in demos (#886) * Update demos * README update --- README.md | 9 ++++----- example/googleMapsAerial.js | 18 +++++++----------- example/googleMapsExample.js | 18 +++++++----------- example/index.js | 20 +++++++++----------- example/ionExample.js | 17 ++++++----------- example/metadata.js | 12 +++--------- 6 files changed, 36 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index b17b87b47..03c0628c5 100644 --- 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 index 0fd769d5b..5b7acfb54 100644 --- a/example/googleMapsAerial.js +++ b/example/googleMapsAerial.js @@ -1,5 +1,5 @@ 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, @@ -7,7 +7,6 @@ import { 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/three@0.153.0/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/three@0.153.0/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 index 3096a732b..6993d3921 100644 --- 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/three@0.153.0/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/three@0.153.0/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 index c37449f4e..86a4a6429 100644 --- 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/three@0.153.0/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 index b0d2ac122..5214aa7e5 100644 --- 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/three@0.153.0/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/three@0.153.0/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 index 42d5ce2ab..18762b964 100644 --- 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 } ) => {