refactor: integrate gsap and lil-gui for enhanced debugging and animation controls

src/script.js

@@ -1,6 +1,14 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { Timer } from 'three/examples/jsm/misc/Timer.js';
+import { gsap } from 'gsap';
+import GUI from 'lil-gui';
+
+/**
+ * Debug
+ */
+const gui = new GUI();
+const debugObject = {};
 
 /**
  * Base
@@ -13,7 +21,7 @@ const scene = new THREE.Scene();
 
 /**
  * Object
- */
+*/
 const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
 
 // const positionsArray = new Float32Array([
@@ -24,11 +32,33 @@ const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
 
 // const geometry = new THREE.BufferGeometry();
 // geometry.setAttribute('position', new THREE.BufferAttribute(positionsArray, 3));
+debugObject.color = '#ffffff';
 
-const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
+const material = new THREE.MeshBasicMaterial({ color: debugObject.color, wireframe: true });
 const mesh = new THREE.Mesh(geometry, material);
 scene.add(mesh);
 
+gui.add(mesh.position, 'y').min(-3).max(3).step(0.01).name('elevation');
+gui.add(material, 'wireframe');
+gui.add(mesh, 'visible').name('isVisible');
+gui.addColor(debugObject, 'color').onChange(() =>
+{
+	material.color.set(debugObject.color);
+});
+
+debugObject.spin = () =>
+{
+	gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + Math.PI * 2 });
+};
+gui.add(debugObject, 'spin');
+
+debugObject.subdivision = 2;
+gui.add(debugObject, 'subdivision').min(1).max(20).step(1).onFinishChange(() =>
+{
+	mesh.geometry.dispose();
+	mesh.geometry = new THREE.BoxGeometry(1, 1, 1, debugObject.subdivision, debugObject.subdivision, debugObject.subdivision);
+});
+
 /**
  * Sizes
  */