Added Gridhelper toggle, Added Mabulig logo, UI improvements

2026-05-29 09:59:19 +08:00
parent 53bb1f2475
commit 36ea08e50b
3 changed files with 19 additions and 2 deletions
@@ -19,7 +19,7 @@
  </head>
  <body>
    <div id="mabuligheader">
-			<h1>Mabulig Web</h1>
+			<img src="img/Mabulig_logo.png" width="200px">
 		</div>
    <div id="info">
      <h4 id="recordnumbertext">Record Number</h4>
@@ -121,11 +121,13 @@ function loadModel(modelPath) {
    }
    loaderContainer.style.display = 'flex';
    console.log(`Loaded: ${modelPath}`);
+    setGuiEnabled(gui, false);

    loader.load(modelPath, (glb) => {
        currentModel = glb.scene;
        scene.add(glb.scene);
        loaderContainer.style.display = 'none'; // Hide Loading Throbber
+        setGuiEnabled(gui, true);
    });
    
 }
@@ -147,6 +149,8 @@ function startApp() {
    let variantOptions = Object.keys(modelsData[0].variants);
    let variantController = gui.add(params, 'variant', variantOptions).name('Variant');

+    let gridcontroller = gui.add(gridHelper, 'visible').name('Toggle Grid');
+
    // 4. Handle dynamic updates
    nameController.onChange((selectedName) => {
        const selectedModelData = modelsData.find(item => item.name === selectedName); // Find the data for the newly selected model
@@ -154,9 +158,11 @@ function startApp() {

        params.variant = newVariants[0]; // Update the param state to the first available variant of the new model

-        // Destroy the old variant dropdown and create a new one with updated options
+        // Destroy the old variant dropdown and gridhelper and create a new ones with updated options
        variantController.destroy();
+        gridcontroller.destroy();
        variantController = gui.add(params, 'variant', newVariants).name('Variant');
+        gridcontroller = gui.add(gridHelper, 'visible').name('Toggle Grid');

        // Re-attach the onChange listener to the new dropdown
        attachVariantListener(variantController, selectedModelData);
@@ -220,6 +226,17 @@ function animate( time ) {
  renderer.render( scene, camera );
 }

+//Toggle GUI
+function setGuiEnabled(guiInstance, isEnabled) {
+    guiInstance.controllersRecursive().forEach(controller => {
+        isEnabled ? controller.enable() : controller.disable();
+    });
+    
+    // Visually dim the GUI when disabled
+    guiInstance.domElement.style.opacity = isEnabled ? '1' : '0.5';
+    guiInstance.domElement.style.pointerEvents = isEnabled ? 'auto' : 'none';
+}
+
 //Show Info div after 5 seconds after initial load
 setTimeout(() => {
    const infoElement = document.getElementById('info');