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

Compare commits

base: nicolo:master
Branches Tags
nicolo:master nicolo:structure-updates
..
compare: nicolo:structure-updates
Branches Tags
nicolo:structure-updates nicolo:master

1 Commits
master ... structure-

Author SHA1 Message Date
Nicolò P
2df5a71241 WIP: first reworking based on requirements 
NOTE: node loading logic not working yet!
 2026-02-20 17:25:10 +01:00
4 changed files with 125 additions and 120 deletions
Expand all files Collapse all files

BIN
assets/pano/gradient.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

194
config.js
View File

@@ -17,7 +17,7 @@ const theater2Popup = `
export const config = {
scene : {
initialExposure: 0.7,
autoLP: true,
autoLP: false,
},
menu : {
//audioBtn1
@@ -44,89 +44,115 @@ export const config = {
uri : `${BASE_URI}/scenes/ssgp/`,
popup: theater2Popup,
coords: [45.4401, 12.3408],
nodes: [
/*
{
label: 'Struttura principale',
model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
isMain: true,
},
*/
{
label: 'Struttura parete di fondo',
model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
isMain: true,
},
{
label: 'Ballatoio',
model: 'models/ssgp/Teatro_SSGP_Ballatoio.glb',
},
{
label: 'Boccascena',
model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
},
{
label: 'Fossa orchestra',
model: 'models/ssgp/Teatro_SSGP_Fossa_orchestra.glb',
},
{
label: 'Graticcia',
model: 'models/ssgp/Teatro_SSGP_Graticcia.glb',
},
{
label: 'Ordine 1',
model: 'models/ssgp/Teatro_SSGP_Ordine1.glb',
},
{
label: 'Ordine 2',
model: 'models/ssgp/Teatro_SSGP_Ordine2.glb',
},
{
label: 'Ordine 3',
model: 'models/ssgp/Teatro_SSGP_Ordine3.glb',
},
{
label: 'Ordine 4',
model: 'models/ssgp/Teatro_SSGP_Ordine4.glb',
},
{
label: 'Ordine 5',
model: 'models/ssgp/Teatro_SSGP_Ordine5.glb',
},
{
label: 'Palcoscenico',
model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb',
},
{
label: 'Parapetto scala piani',
model: 'models/ssgp/Teatro_SSGP_parapetto_scala_piani.glb',
},
{
label: 'Percorsi scale corridoi',
model: 'models/ssgp/Teatro_SSGP_Percorsi_scale_corridoi.glb',
},
{
label: 'Platea peplano',
model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
},
{
label: 'Quinte architettoniche fisse',
model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_fisse.glb',
},
{
label: 'Quinte architettoniche mobili',
model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_mobili.glb',
},
{
label: 'Spazio tecnico superiore',
model: 'models/ssgp/Teatro_SSGP_Layer_Spazio_tecnico_sup_soffitta.glb',
},
{
label: 'Spazio tecnico inferiore',
model: 'models/ssgp/Teatro_SSGP_Spazio_tecnico_inf.glb',
},
],
pano: `pano/defsky-grass.jpg`,
nodes: {
groups: [
{
label: 'Teatro',
layers: [
{
label: 'Struttura complessiva',
model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
//isMain: true,
},
{
label: 'Involucro',
model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
isMain: true,
opacity: 0.2,
},
]
},
{
label: 'Sala / Auditorium',
layers: [
{
label: 'Peplano / Platea',
model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
},
{
label: 'Ordine 1',
model: 'models/ssgp/Teatro_SSGP_Ordine1.glb',
},
{
label: 'Ordine 2',
model: 'models/ssgp/Teatro_SSGP_Ordine2.glb',
},
{
label: 'Ordine 3',
model: 'models/ssgp/Teatro_SSGP_Ordine3.glb',
},
{
label: 'Ordine 4',
model: 'models/ssgp/Teatro_SSGP_Ordine4.glb',
},
{
label: 'Ordine 5',
model: 'models/ssgp/Teatro_SSGP_Ordine5.glb',
},
{
label: 'Parapetto',
model: 'models/ssgp/Teatro_SSGP_parapetto_scala_piani.glb',
},
{
label: 'Percorsi pubblico',
model: 'models/ssgp/Teatro_SSGP_Percorsi_scale_corridoi.glb',
},
]
},
{
label: 'Scena',
layers: [
{
label: 'Palcoscenico',
model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb',
},
{
label: 'Boccascena / Proscenio',
model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
},
{
label: 'Quinte architettoniche fisse',
model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_fisse.glb',
},
{
label: 'Quinte architettoniche mobili',
model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_mobili.glb',
},
]
},
{
label: 'Spazi tecnici',
layers: [
{
label: 'Spazio tecnico superiore',
model: 'models/ssgp/Teatro_SSGP_Layer_Spazio_tecnico_sup_soffitta.glb',
},
{
label: 'Graticcia',
model: 'models/ssgp/Teatro_SSGP_Graticcia.glb',
},
{
label: 'Ballatoio',
model: 'models/ssgp/Teatro_SSGP_Ballatoio.glb',
},
{
label: 'Spazio tecnico inferiore',
model: 'models/ssgp/Teatro_SSGP_Spazio_tecnico_inf.glb',
},
]
},
{
label: 'Orchestra',
layers: [
{
label: 'Fossa orchestra',
model: 'models/ssgp/Teatro_SSGP_Fossa_orchestra.glb',
},
]
}
],
},
pano: `pano/gradient.jpg`,
}
],
map : {

9
js/scene.js
View File

@@ -62,7 +62,7 @@ Scene.createClippingPlaneMesh = function (boundingSphere) {
const planeSize = boundingSphere.radius * 1.5;
const mesh = new THREE.Mesh(
new THREE.PlaneGeometry(planeSize, planeSize),
new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.1, side: THREE.DoubleSide, transparent: true })
new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.05, side: THREE.DoubleSide, transparent: true })
);
return mesh;
@@ -261,6 +261,12 @@ Scene.loadNodes = function (nodes) {
let node = ATON.createSceneNode(n.label);
node.load(n.model);
node.setRotation(0, 1.5, 0);
// Apply any transparency before attaching to scene
if (n.opacity) {
node.setMaterial(new THREE.MeshPhongMaterial({transparent: true, opacity: n.opacity, color: '#fff'}));
}
node.attachToRoot();
if (n.isMain) {
@@ -269,6 +275,7 @@ Scene.loadNodes = function (nodes) {
AppState.clipping.boundingSphere = node.getBound();
}
AppState.nodes.push({id: n.label, active: true});
});
}

42
js/ui.js
View File

@@ -12,21 +12,21 @@ UI.contentMenuTabs = `
<!-- Nav tabs -->
<ul class="nav nav-pills" id="content-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
<i class="bi bi-music-note-list me-1"></i> Media
<button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
<i class="bi bi-boxes me-1"></i> Elementi 3D
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
<i class="bi bi-stack me-1"></i> Layer
<button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
<i class="bi bi-diagram-3 me-1"></i> Contenuti
</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
<div class="tab-pane p-3" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
<div class="tab-pane active p-3" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
<div class="tab-pane p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
</div>
`;
@@ -166,20 +166,11 @@ UI.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(
@@ -197,18 +188,6 @@ UI.toggleSettingsPanel = function(triggerId) {
AppState.shadows = checked;
}
);
// 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);
}
);
});
}
/**
@@ -246,19 +225,12 @@ UI.toggleContentMenu = function(triggerId) {
btn.addEventListener('click', () => {
ATON.UI.setSidePanelRight();
ATON.UI.showSidePanel({header: 'Contenuti'});
ATON.UI.showSidePanel({header: 'Menu'});
// Append tabs, then tab panes
const tabs = this.domParser.parseFromString(UI.contentMenuTabs, 'text/html');
ATON.UI.elSidePanel.appendChild(tabs.querySelector('#content-tabs'));
ATON.UI.elSidePanel.appendChild(tabs.querySelector('.tab-content'));
this.buildLayersMenu(AppState.nodes, ATON.UI.elSidePanel.querySelector('#layer'));
// This is just an example, at the moment... to be revised with config -> markers (scenes) -> menu
if (AppState.sceneHasAudio) {
let btn = this.domParser.parseFromString(UI.audioExample, 'text/html');
const audio = btn.querySelector('#audio-example');
ATON.UI.elSidePanel.querySelector('#media').appendChild(audio);
}
});
}
/**