[Clean] lesson 46: clean the stats.js and remove the gui

src/routes/lessons/46/+page.svelte

@@ -17,13 +17,13 @@
   const HEIGHT = 600;
   const RATIO = WIDTH / HEIGHT;
 
-  let gui: GUI | null = null;
+  let stats: Stats | null = null;
 
   function start() {
     const pixelRatio = Math.min(window.devicePixelRatio, 2);
 
     // fps stats
-    var stats = new Stats();
+    stats = new Stats();
     stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
     document.body.appendChild(stats.dom);
 
@@ -35,9 +35,6 @@
       base + "/optimization/displacementMap.png"
     );
 
-    // Debug
-    gui = new GUI();
-
     // Scene
     const scene = new THREE.Scene();
 
@@ -211,7 +208,7 @@
 
     // Animation
     const tick = () => {
-      stats.begin();
+      stats!.begin();
       const elapsedTime = clock.getElapsedTime();
 
       torusKnot.rotation.y = elapsedTime * 0.1;
@@ -224,7 +221,7 @@
       controls.update();
       renderer.render(scene, camera);
 
-      stats.end();
+      stats!.end();
 
       window.requestAnimationFrame(tick);
     };
@@ -235,6 +232,10 @@
   onMount(() => {
     if (browser) {
       start();
+
+      return () => {
+        stats?.dom.remove();
+      };
     }
   });
 </script>