Mabulig/MabuligWeb
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Gridhelper toggle, Added Mabulig logo, UI improvements

Browse Source
This commit is contained in:
Fritz Villahermosa
2026-05-29 09:59:19 +08:00
parent 53bb1f2475
commit 36ea08e50b
3 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
img/Mabulig_logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

index.html
+1 -1
View File
@@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<div id="mabuligheader"> <div id="mabuligheader">
<h1>Mabulig Web</h1> <img src="img/Mabulig_logo.png" width="200px">
</div> </div>
<div id="info"> <div id="info">
<h4 id="recordnumbertext">Record Number</h4> <h4 id="recordnumbertext">Record Number</h4>
main.js
+18 -1
View File
@@ -121,11 +121,13 @@ function loadModel(modelPath) {
} }
loaderContainer.style.display = 'flex'; loaderContainer.style.display = 'flex';
console.log(`Loaded: ${modelPath}`); console.log(`Loaded: ${modelPath}`);
setGuiEnabled(gui, false);
loader.load(modelPath, (glb) => { loader.load(modelPath, (glb) => {
currentModel = glb.scene; currentModel = glb.scene;
scene.add(glb.scene); scene.add(glb.scene);
loaderContainer.style.display = 'none'; // Hide Loading Throbber loaderContainer.style.display = 'none'; // Hide Loading Throbber
setGuiEnabled(gui, true);
}); });
} }
@@ -147,6 +149,8 @@ function startApp() {
let variantOptions = Object.keys(modelsData[0].variants); let variantOptions = Object.keys(modelsData[0].variants);
let variantController = gui.add(params, 'variant', variantOptions).name('Variant'); let variantController = gui.add(params, 'variant', variantOptions).name('Variant');
let gridcontroller = gui.add(gridHelper, 'visible').name('Toggle Grid');
// 4. Handle dynamic updates // 4. Handle dynamic updates
nameController.onChange((selectedName) => { nameController.onChange((selectedName) => {
const selectedModelData = modelsData.find(item => item.name === selectedName); // Find the data for the newly selected model 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 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(); variantController.destroy();
gridcontroller.destroy();
variantController = gui.add(params, 'variant', newVariants).name('Variant'); 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 // Re-attach the onChange listener to the new dropdown
attachVariantListener(variantController, selectedModelData); attachVariantListener(variantController, selectedModelData);
@@ -220,6 +226,17 @@ function animate( time ) {
renderer.render( scene, camera ); 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 //Show Info div after 5 seconds after initial load
setTimeout(() => { setTimeout(() => {
const infoElement = document.getElementById('info'); const infoElement = document.getElementById('info');