docs: remove GUI on destroy (animation spinning)

Author: nartc

apps/demo/src/app/animation-skinning-ik/animation-skinning-ik.component.ts

@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, OnDestroy, ViewChild } from '@angular/core';
 import { extend, injectBeforeRender, injectNgtLoader, NgtArgs, NgtCanvas, NgtPush, NgtStore } from 'angular-three';
 import { map } from 'rxjs';
 import * as THREE from 'three';
@@ -49,7 +49,7 @@ extend({ TransformControls, CCDIKHelper });
     imports: [NgtArgs, NgIf, DemoOrbitControls, NgtPush],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class Scene {
+export class Scene implements OnDestroy {
     private readonly config = { followSphere: false, turnHead: true, ikSolver: true };
     private readonly gui = new GUI();
 
@@ -143,6 +143,10 @@ export class Scene {
         this.gui.add(this.solver, 'update').name('IK Manual update()');
         this.gui.open();
     }
+
+    ngOnDestroy() {
+        this.gui.domElement.remove();
+    }
 }
 
 @Component({

apps/demo/src/app/camera/camera.component.ts

@@ -166,6 +166,14 @@ export class Scene implements AfterViewInit, OnInit {
 @Component({
     standalone: true,
     template: `
+        <div class="block h-full w-full bg-black">
+            <ngt-canvas
+                [sceneGraph]="SceneGraph"
+                [gl]="{ alpha: false }"
+                [camera]="{ fov: 50, near: 1, far: 10000, position: [0, 0, 2500] }"
+                (created)="onCreated($event)"
+            />
+        </div>
         <div class="absolute text-center text-white w-full top-0 left-0 text-xl">
             <a href="https://threejs.org" target="_blank" rel="noopener" class="underline"> three.js </a> -
             <a href="https://angular-threejs.netlify.app" target="_blank" rel="noopener" class="underline">
@@ -175,14 +183,6 @@ export class Scene implements AfterViewInit, OnInit {
             <br />
             <b class="text-green-300">O</b> orthographic <b class="text-green-300">P</b> perspective
         </div>
-        <div class="block h-full w-full bg-black">
-            <ngt-canvas
-                [sceneGraph]="SceneGraph"
-                [gl]="{ alpha: false }"
-                [camera]="{ fov: 50, near: 1, far: 10000, position: [0, 0, 2500] }"
-                (created)="onCreated($event)"
-            />
-        </div>
     `,
     imports: [NgtCanvas],
 })