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 ) {
 
@@ -143,6 +172,12 @@ 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 => {
 
@@ -214,6 +249,9 @@ export class DebugTilesPlugin {
 	}
 
 	_initExtremes() {
+		if ( !this.tiles.root ) {
+			return;
+		}
 
 		// initialize the extreme values of the hierarchy
 		let maxDepth = - 1;
@@ -646,6 +684,15 @@ export class DebugTilesPlugin {
 
 	}
 
+	_removeHelpers() {
+		// dispose of all helper objects
+		tiles.traverse( tile => {
+
+			this._onDisposeModel( tile );
+
+		} );
+	}
+
 	dispose() {
 
 		const tiles = this.tiles;
@@ -659,11 +706,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();