diff --git a/img/Mabulig_logo.png b/img/Mabulig_logo.png
new file mode 100644
index 0000000..1008330
Binary files /dev/null and b/img/Mabulig_logo.png differ
diff --git a/index.html b/index.html
index 1a2006c..593f7db 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
Record Number
diff --git a/main.js b/main.js
index a649465..ee78aa6 100644
--- a/main.js
+++ b/main.js
@@ -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');
