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

package.json

@@ -12,6 +12,8 @@
     "vite-plugin-restart": "^0.4.2"
   },
   "dependencies": {
+    "gsap": "^3.15.0",
+    "lil-gui": "^0.21.0",
     "three": "^0.174.0"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      gsap:
+        specifier: ^3.15.0
+        version: 3.15.0
+      lil-gui:
+        specifier: ^0.21.0
+        version: 0.21.0
       three:
         specifier: ^0.174.0
         version: 0.174.0
@@ -352,10 +358,16 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  [email protected]:
+    resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
+
   [email protected]:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-tpvxN7v1GvE/Tv+GRopfOp0W7fVEjF4PltkuX8vOCIfim22rD1ztvfkoEMcv9lzQeuNUSeIrUmUjBwmlW/oUew==}
+
   [email protected]:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -649,8 +661,12 @@ snapshots:
   [email protected]:
     optional: true
 
+  [email protected]: {}
+
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       braces: 3.0.3

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
  */