fix(example): Fix destroy gui when we change source dataset on pointcloud examples

Author: ketourneau

examples/pointcloud_loader.html

@@ -60,12 +60,11 @@
         <div id="viewerDiv"></div>
 
         <script type="module">
-            import { Vector3 } from 'three';
             import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
             import Stats from 'stats-gl';
             import { getFormat, getPointCloudClass, getDefaultAttribute, zoomToLayer } from './jsm/PointCloudHelper.js';
 
-            import { CRS, MAIN_LOOP_EVENTS, PNTS_MODE, PlanarControls, View } from 'itowns';
+            import { CRS, MAIN_LOOP_EVENTS, PlanarControls, View } from 'itowns';
             import { PointCloudDebug } from 'debug';
 
             const viewerDiv = document.getElementById('viewerDiv');
@@ -87,6 +86,7 @@
             window.updateUrlParams = updateUrlParams;
 
             let currentView = null;
+            let gui = null;
 
             window.load = async function load(url, options = {}) {
                 // Cleanup previous view
@@ -96,6 +96,10 @@
                     viewerDiv.innerHTML = '';
                 }
 
+                if (gui) {
+                    gui.destroy();
+                }
+
                 const { format = 'auto', crs } = options;
                 const { Source, Layer } = getPointCloudClass(format);
 
@@ -131,7 +135,7 @@
                 const controls = new PlanarControls(view);
                 controls.groundLevel = layer.minElevationRange;
 
-                const gui = new GUI();
+                gui = new GUI();
                 PointCloudDebug.initTools(view, layer, gui);
             }
 

examples/pointcloud_loader_globe.html

@@ -60,14 +60,12 @@
         <div id="viewerDiv"></div>
 
         <script type="module">
-            import { Vector3 } from 'three';
             import Stats from 'stats-gl';
             import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
             import { getFormat, getPointCloudClass, getDefaultAttribute, zoomToLayerGlobe } from './jsm/PointCloudHelper.js';
 
             import {
-                CRS, MAIN_LOOP_EVENTS, PNTS_MODE,
-                Coordinates,
+                CRS, MAIN_LOOP_EVENTS,
                 View,
                 GlobeView,
                 Fetcher,
@@ -97,6 +95,7 @@
             window.updateUrlParams = updateUrlParams;
 
             let currentView = null;
+            let gui = null;
 
             window.load = async function load(url, options = {}) {
                 // Cleanup previous view
@@ -106,6 +105,10 @@
                     viewerDiv.innerHTML = '';
                 }
 
+                if (gui) {
+                    gui.destroy();
+                }
+
                 const { format = 'auto', crs } = options;
                 const { Source, Layer } = getPointCloudClass(format);
                 const attribute = getDefaultAttribute(format);
@@ -162,7 +165,7 @@
                     view.controls.lookAtCoordinate(options.placement, true);
                 }
 
-                const gui = new GUI();
+                gui = new GUI();
                 PointCloudDebug.initTools(view, layer, gui);
             }