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

UI and config changes + tentative light probe switch

Browse Source
This commit is contained in:
Nicolò P 2025-10-17 16:13:49 +02:00
parent 21e986acde
commit 7299df6f1e
4 changed files with 76 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/hemi-grey.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

6
config.js
View File

@ -12,6 +12,10 @@ const audioBtn1 = `
`;
export const config = {
scene : {
initialExposure: 0.6,
autoLP: false,
},
menu : {
audioBtn1
},
@ -22,7 +26,7 @@ export const config = {
popup: theater1Popup,
coords: [45.4363, 12.3352],
model: "teatro_san_salvador_20250926.gltf",
pano: "defsky-grass.jpg",
pano: "hemi-grey.jpg",
}
],
map : {

126
js/scene.js
View File

@ -15,6 +15,34 @@ Scene.UI = {};
Scene.UI.domParser = new DOMParser;
/**
* @todo Get clipping button from state? Review logic!!
* @param {String} triggerSelector
*/
Scene.UI.toggleClipper = function(triggerSelector) {
const trigger = document.querySelector(triggerSelector);
trigger.addEventListener(
'click',
() => {
const aoCurrentState = AppState.ambientOcclusion;
if (!AppState.clipping.enabled) {
AppState.clipping.enabled = true;
trigger.className += ' border border-2 border-white';
Scene.toggleAmbientOcclusion(false);
//Scene.activateClipper()
} else {
AppState.clipping.enabled = false;
ATON.disableClipPlanes();
AppState.root.remove(AppState.clipping.helper);
AppState.clipping.helper = null;
let noBorder = trigger.className.replace(/ border.*$/g, '');
trigger.className = noBorder;
Scene.toggleAmbientOcclusion(aoCurrentState);
}
}
);
}
/**
* @todo Experimental...
* @param {THREE.Object3D} object - A THREE Object3D instance
@ -39,18 +67,20 @@ Scene.showEdges = function(object) {
* Activate clipping plane
*/
Scene.activateClipper = function() {
const geometry = new THREE.PlaneGeometry( 24, 24 );
const material = new THREE.MeshPhongMaterial({
color: 0xffffee,
opacity: 0.5,
transparent: true,
});
const plane = new THREE.Mesh( geometry, material );
const root = AppState.root;
console.log(root, plane);
root.add(plane);
AppState.clipping.enabled = true;
AppState.clipping.plane = plane;
const point = ATON.getSceneQueriedPoint();
if (point) {
// First remove any existing clipping planes
ATON.disableClipPlanes();
// Normal of the clipping plane along the Y axis facing down
const plane = ATON.addClipPlane(new THREE.Vector3(0, -1, 0), point);
// Add a visible plane helper for the clipping plane
const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
// Remove any already visbile helper plane
if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
AppState.root.add(helper);
AppState.clipping.helper = helper;
console.log("I'm clipping, baby!");
}
}
/**
@ -155,11 +185,21 @@ Scene.toggleSettingsPanel = function(triggerId) {
<label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title=""></i></label>
`;
const lightProbeSwitch = document.createElement('div');
lightProbeSwitch.className = 'form-check form-switch ms-4 mt-2';
lightProbeSwitch.innerHTML = `
<input class="form-check-input" type="checkbox" role="switch" id="lpSwitch" title="Abilita / disabilita mappa HDRi">
<label class="form-check-label" for="lpSwitch">Mappa HDRi <em>(light probe)</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
`;
shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
ambientOcclSwitch.querySelector('input[type="checkbox"').checked = AppState.ambientOcclusion;
lightProbeSwitch.querySelector('input[type="checkbox"').checked = AppState.lightProbe;
ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
ATON.UI.elSidePanel.appendChild(shadowsSwitch);
ATON.UI.elSidePanel.appendChild(lightProbeSwitch);
// TODO: move somewhere else...
document.querySelector('#aoSwitch').addEventListener(
'change',
@ -176,35 +216,19 @@ Scene.toggleSettingsPanel = function(triggerId) {
AppState.shadows = checked;
}
);
});
}
/**
* @todo Get clipping button from state? Review logic!!
* @param {String} triggerSelector
*/
Scene.UI.toggleClipper = function(triggerSelector) {
const trigger = document.querySelector(triggerSelector);
trigger.addEventListener(
'click',
() => {
const aoCurrentState = AppState.ambientOcclusion;
if (!AppState.clipping.enabled) {
AppState.clipping.enabled = true;
trigger.className += ' border border-2 border-white';
Scene.toggleAmbientOcclusion(false);
//Scene.activateClipper()
} else {
AppState.clipping.enabled = false;
ATON.disableClipPlanes();
AppState.root.remove(AppState.clipping.helper);
AppState.clipping.helper = null;
let noBorder = trigger.className.replace(/ border.*$/g, '');
trigger.className = noBorder;
Scene.toggleAmbientOcclusion(aoCurrentState);
}
// Not working properly?
document.querySelector('#lpSwitch').addEventListener(
'change',
event => {
const checked = event.target.checked;
ATON.setAutoLP(checked);
//if (!checked) ATON.clearLightProbes();
AppState.lightProbe = checked;
if (checked) ATON.updateLightProbes();
console.log('Light probe: ', checked);
}
);
});
}
Scene.init = function() {
@ -214,32 +238,19 @@ Scene.init = function() {
ATON.UI.init();
// All assets for this app are stored here
ATON.setPathCollection('./assets/');
// Light direction should be dynamic / user-defined
// Initial light direction
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
ATON.toggleShadows(true);
ATON.setExposure(0.8);
ATON.setExposure(config.scene.initialExposure);
// Open settings side panel when clicking on settings btn
Scene.toggleSettingsPanel('settings');
Scene.toggleContentMenu('menu');
// TODO: move to dedicated function!!
window.addEventListener('mousedown', event => {
// Activate clipping when left-clicking on the scene
if (AppState.clipping.enabled && event.buttons === 1) {
const point = ATON.getSceneQueriedPoint();
if (point) {
// First remove any existing clipping planes
ATON.disableClipPlanes();
// Normal of the clipping plane along the Y axis facing down
const plane = ATON.addClipPlane(new THREE.Vector3(0, -1, 0), point);
// Add a visible plane helper for the clipping plane
const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
// Remove any already visbile helper plane
if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
AppState.root.add(helper);
AppState.clipping.helper = helper;
console.log("I'm clipping, baby!");
}
this.activateClipper();
}
});
}
@ -285,7 +296,8 @@ Scene.openScene = function(marker) {
mainNode.attachToRoot();
ATON.setAutoLP(true);
ATON.setAutoLP(config.scene.autoLP);
AppState.lightProbe = config.scene.autoLP;
Scene.toggleAmbientOcclusion(true);
AppState.ambientOcclusion = true;

1
js/state.js
View File

@ -9,6 +9,7 @@ export const AppState = {
],
ambientOcclusion : true,
shadows : true,
lightProbe : false,
map : null,
clipping : {
enabled: false,