nicolo/scaenae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better control of the scene's state

Browse Source
This commit is contained in:
Nicolò P. 2025-10-08 18:57:30 +02:00
parent 0ce5a13aec
commit 81e12e4b74
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/scene.js
View File

@ -1,6 +1,6 @@
// Global ATON
import { getSceneStatus, setSceneStatus } from "./state.js";
import { AppState, getSceneStatus, setSceneStatus } from "./state.js";
const material = {
color: "#fff",
@ -43,6 +43,8 @@ Scene.changeLightDirection = function(vector) {
*/
Scene.toggleAmbientOcclusion = function(isEnabled) {
ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
AppState.ambientOcclusion = isEnabled;
}
/**
@ -101,17 +103,20 @@ Scene.toggleSettingsPanel = function(id) {
const ambientOcclSwitch = document.createElement('div');
ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
ambientOcclSwitch.innerHTML = `
<input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" checked title="Abilita / disabilita ambient occlusion">
<label class="form-check-label font-italic" for="aoSwitch">Ambient occlusion</label>
<input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion">
<label class="form-check-label fst-italic" for="aoSwitch">Ambient occlusion</label>
`;
const shadowsSwitch = document.createElement('div');
shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
shadowsSwitch.innerHTML = `
<input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" checked title="Abilita / disabilita ombre">
<label class="form-check-label font-italic" for="shadowsSwitch">Ombre</label>
<input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
<label class="form-check-label" for="shadowsSwitch">Ombre</label>
`;
shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
ambientOcclSwitch.querySelector('input[type="checkbox"').checked = AppState.ambientOcclusion;
ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
ATON.UI.elSidePanel.appendChild(shadowsSwitch);
// TODO: move somewhere else...
@ -124,7 +129,9 @@ Scene.toggleSettingsPanel = function(id) {
document.querySelector('#shadowsSwitch').addEventListener(
'change',
event => {
ATON.toggleShadows(event.target.checked);
const checked = event.target.checked;
ATON.toggleShadows(checked);
AppState.shadows = checked;
}
);
});
@ -155,6 +162,9 @@ Scene.toggleScene = function(id) {
btn.addEventListener('click', () => {
scene.classList.toggle('d-none');
// Pause rendering the 3D scene to free resources (hopefully)
// when browsing the map
ATON.renderPause();
document.querySelector('#map').classList.toggle('d-none');
});
}
@ -171,6 +181,7 @@ Scene.openScene = function(marker) {
}
scene.classList.toggle('d-none');
ATON.renderResume();
if (!getSceneStatus(marker.id)) {
// Set scene as active

2
js/state.js
View File

@ -5,6 +5,8 @@ export const AppState = {
active : false
}
],
ambientOcclusion : true,
shadows : true,
}
/**