| 365 | |
| 366 | // --- DAT.GUI --- |
| 367 | function initGUI() { |
| 368 | // Check if dat exists |
| 369 | if (typeof dat === 'undefined') { |
| 370 | console.warn("dat.GUI library not found. GUI controls will be unavailable."); |
| 371 | return; // Exit if dat.GUI is not loaded |
| 372 | } |
| 373 | |
| 374 | try { |
| 375 | // Create GUI |
| 376 | gui = new dat.GUI({ width: 300 }); |
| 377 | gui.close(); // Start with closed panel |
| 378 | |
| 379 | // --- Animation Parameters --- |
| 380 | const animFolder = gui.addFolder('Animation'); |
| 381 | // Remove cameraSpeed option since we're not using default camera movement |
| 382 | animFolder.add(params, 'waveIntensity', 0, 1, 0.05).name('Wave Intensity'); |
| 383 | animFolder.add(params, 'transitionSpeed', 0.001, 0.05, 0.001).name('Transition Speed'); |
| 384 | animFolder.open(); |
| 385 | |
| 386 | // --- Visual Parameters --- |
| 387 | const visualFolder = gui.addFolder('Visual'); |
| 388 | visualFolder.add(params, 'particleSize', 0.1, 10, 0.1).onChange(function(value) { |
| 389 | if (particles && particles.material) { |
| 390 | particles.material.size = value; |
| 391 | } |
| 392 | }).name('Particle Size'); |
| 393 | visualFolder.open(); |
| 394 | |
| 395 | // --- Pattern Controls --- |
| 396 | gui.add(params, 'changePattern').name('Next Pattern'); |
| 397 | |
| 398 | // Add GUI styling (optional) |
| 399 | const guiElement = document.querySelector('.dg.ac'); |
| 400 | if (guiElement) { |
| 401 | guiElement.style.zIndex = "1000"; // Ensure GUI is above other elements |
| 402 | } |
| 403 | |
| 404 | } catch (error) { |
| 405 | console.error("Error initializing dat.GUI:", error); |
| 406 | if(gui) gui.destroy(); // Clean up partial GUI if error occurred |
| 407 | gui = null; |
| 408 | } |
| 409 | } |
| 410 | |
| 411 | // --- Updated onResults with Pinch and Rotation --- |
| 412 | function onResults(results) { |