feat(DebugTilesPlugin): allow toggling the plugin (#647)

src/plugins/three/DebugTilesPlugin.d.ts

@@ -14,6 +14,8 @@ export const RANDOM_NODE_COLOR: ColorMode;
 export const CUSTOM_COLOR: ColorMode;
 export class DebugTilesPlugin {
 
+	enabled: boolean;
+
 	displayBoxBounds : boolean;
 	displaySphereBounds : boolean;
 	displayRegionBounds : boolean;

src/plugins/three/DebugTilesPlugin.js

@@ -60,6 +60,8 @@ export class DebugTilesPlugin {
 		this.name = 'DEBUG_TILES_PLUGIN';
 		this.tiles = null;
 
+		this._enabled = true;
+
 		this.extremeDebugDepth = - 1;
 		this.extremeDebugError = - 1;
 		this.boxGroup = null;
@@ -84,6 +86,33 @@ export class DebugTilesPlugin {
 
 	}
 
+	get enabled() {
+
+		return this._enabled;
+
+	}
+
+	set enabled( v ) {
+
+		if ( v !== this._enabled ) {
+
+			this._enabled = v;
+
+			if ( this._enabled ) {
+
+				this._initExtremes();
+				this._initializeExistingTiles();
+
+			} else {
+
+				this._removeHelpers();
+
+			}
+
+		}
+
+	}
+
 	// initialize the groups for displaying helpers, register events, and initialize existing tiles
 	init( tiles ) {
 
@@ -109,31 +138,48 @@ export class DebugTilesPlugin {
 		// register events
 		this._onLoadTileSetCB = () => {
 
-			this._initExtremes();
+			if ( this._enabled ) {
+
+				this._initExtremes();
+
+			}
 
 		};
 
 		this._onLoadModelCB = ( { scene, tile } ) => {
 
-			this._onLoadModel( scene, tile );
+			if ( this._enabled ) {
+
+				this._onLoadModel( scene, tile );
+
+			}
 
 		};
 
 		this._onDisposeModelCB = ( { tile } ) => {
 
+			// Note that we want to cleanup memory even if the plugin is disabled.
 			this._onDisposeModel( tile );
 
 		};
 
 		this._onUpdateAfterCB = () => {
 
-			this._onUpdateAfter();
+			if ( this._enabled ) {
+
+				this._onUpdateAfter();
+
+			}
 
 		};
 
 		this._onTileVisibilityChangeCB = ( { scene, tile, visible } ) => {
 
-			this._onTileVisibilityChange( tile, visible );
+			if ( this._enabled ) {
+
+				this._onTileVisibilityChange( tile, visible );
+
+			}
 
 		};
 
@@ -143,8 +189,15 @@ export class DebugTilesPlugin {
 		tiles.addEventListener( 'update-after', this._onUpdateAfterCB );
 		tiles.addEventListener( 'tile-visibility-change', this._onTileVisibilityChangeCB );
 
+		this._initExtremes();
+		this._initializeExistingTiles();
+
+	}
+
+	_initializeExistingTiles() {
+
 		// initialize an already-loaded tiles
-		tiles.traverse( tile => {
+		this.tiles.traverse( tile => {
 
 			if ( tile.cached.scene ) {
 
@@ -154,7 +207,7 @@ export class DebugTilesPlugin {
 
 		} );
 
-		tiles.visibleTiles.forEach( tile => {
+		this.tiles.visibleTiles.forEach( tile => {
 
 			this._onTileVisibilityChange( tile, true );
 
@@ -215,6 +268,12 @@ export class DebugTilesPlugin {
 
 	_initExtremes() {
 
+		if ( ! ( this.tiles && this.tiles.root ) ) {
+
+			return;
+
+		}
+
 		// initialize the extreme values of the hierarchy
 		let maxDepth = - 1;
 		let maxError = - 1;
@@ -625,27 +684,42 @@ export class DebugTilesPlugin {
 		const cached = tile.cached;
 		if ( cached.boxHelperGroup ) {
 
-			cached.boxHelperGroup.children[ 0 ].geometry.dispose();
+			const helper = cached.boxHelperGroup.children[ 0 ];
+			helper.geometry.dispose();
+			helper.removeFromParent();
 			delete cached.boxHelperGroup;
 
 		}
 
 		if ( cached.sphereHelper ) {
 
 			cached.sphereHelper.geometry.dispose();
+			cached.sphereHelper.removeFromParent();
 			delete cached.sphereHelper;
 
 		}
 
 		if ( cached.regionHelper ) {
 
 			cached.regionHelper.geometry.dispose();
+			cached.regionHelper.removeFromParent();
 			delete cached.regionHelper;
 
 		}
 
 	}
 
+	_removeHelpers() {
+
+		// dispose of all helper objects
+		this.tiles.traverse( tile => {
+
+			this._onDisposeModel( tile );
+
+		} );
+
+	}
+
 	dispose() {
 
 		const tiles = this.tiles;
@@ -659,11 +733,7 @@ export class DebugTilesPlugin {
 		this._onUpdateAfter();
 
 		// dispose of all helper objects
-		tiles.traverse( tile => {
-
-			this._onDisposeModel( tile );
-
-		} );
+		this._removeHelpers();
 
 		this.boxGroup.removeFromParent();
 		this.sphereGroup.removeFromParent();