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

Restructure to use separate scenes

Browse Source 
Uses pseudo-router logic...
This commit is contained in:
Nicolò P. 2026-01-14 16:42:39 +01:00
parent 8c1da5e4e2
commit e85bd4f959
13 changed files with 307 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -7,3 +7,4 @@
*.obj *.obj
vendor/ vendor/
.vscode

BIN
assets/icons/section_z.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

18
config.js
View File

@ -1,3 +1,5 @@
const BASE_URI = "/a/scaenae";
const theater1Popup = ` const theater1Popup = `
<div class="text-center"> <div class="text-center">
<h1 class="fs-4">Teatro San Salvador, Venezia</h1> <h1 class="fs-4">Teatro San Salvador, Venezia</h1>
@ -30,24 +32,28 @@ export const config = {
{ {
id : "salvador", id : "salvador",
label : "Teatro San Salvador, Venezia", label : "Teatro San Salvador, Venezia",
uri : `${BASE_URI}/scenes/salvador/`,
popup: theater1Popup, popup: theater1Popup,
coords: [45.4363, 12.3352], coords: [45.4363, 12.3352],
model: "teatro_san_salvador_20250926.gltf", model: "teatro_san_salvador_20250926.gltf",
pano: "pano/defsky-grass.jpg", //pano: `${BASE_URI}/assets/pano/defsky-grass.jpg`,
pano: `pano/defsky-grass.jpg`,
}, },
{ {
id : "ssgp", id : "ssgp",
label : "Teatro Santi Giovanni e Paolo, Venezia", label : "Teatro Santi Giovanni e Paolo, Venezia",
uri : `${BASE_URI}/scenes/ssgp/`,
popup: theater2Popup, popup: theater2Popup,
coords: [45.4401, 12.3408], coords: [45.4401, 12.3408],
model: "SSGP.glb", model: `SSGP.glb`,
pano: "pano/defsky-grass.jpg", //pano: `${BASE_URI}/assets/pano/defsky-grass.jpg`,
pano: `pano/defsky-grass.jpg`,
} }
], ],
map : { map : {
center: [43.570833, 12.140278], center: [45.30833, 12.240278],
initialZoom : 8, initialZoom : 12,
minZoom : 6, minZoom : 6,
maxZoom : 16 maxZoom : 18
} }
} }

26
css/app.css Normal file
View File

@ -0,0 +1,26 @@
body {
height: 100vh;
}
.c-hand {
cursor: pointer;
}
input[type="checkbox"] {
cursor: pointer;
}
#clipper-bar .btn {
background-repeat: no-repeat;
background-position: center;
background-size: 80%;
}
#map {
height: 100%;
}
#clipX {
background-image: url('/a/scaenae/assets/icons/section_x.png');
}
#clipY {
background-image: url('/a/scaenae/assets/icons/section_y.png');
}
#clipZ {
background-image: url('/a/scaenae/assets/icons/section_z.png');
}

97
index.html
View File

@ -27,10 +27,10 @@
<link rel="manifest" href="app.webmanifest"> <link rel="manifest" href="app.webmanifest">
<!-- Web-app ID --> <!-- Web-app ID -->
<meta name="aton:appid" content="app_template"> <meta name="aton:appid" content="scaenae">
<meta name="title" content="SCAENE"> <meta name="title" content="SCAENE">
<meta name="description" content="__APPDESC__"> <meta name="description" content="Web App 3D per il progetto PRINN 'SCAENAE'">
<!-- Add meta theme-color --> <!-- Add meta theme-color -->
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
@ -39,6 +39,7 @@
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css"> <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="/res/css/main.css"> <link rel="stylesheet" type="text/css" href="/res/css/main.css">
<link rel="stylesheet" type="text/css" href="./css/app.css">
<link rel="stylesheet" href="./vendor/leaflet/dist/leaflet.css"> <link rel="stylesheet" href="./vendor/leaflet/dist/leaflet.css">
<!-- Vendors --> <!-- Vendors -->
@ -46,103 +47,13 @@
<script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/dist/THREE.bundle.js"></script> <script type="text/javascript" src="/dist/THREE.bundle.js"></script>
<script type="text/javascript" src="./vendor/three/examples/js/controls/DragControls.js"></script>
<script type="text/javascript" src="/dist/ATON.min.js"></script> <script type="text/javascript" src="/dist/ATON.min.js"></script>
<script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script> <script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
<!-- Main js entry --> <!-- Main js entry -->
<script type="module" src="js/main.js"></script> <script type="module" src="js/main.js"></script>
<style>
body {
height: 100vh;
}
.c-hand {
cursor: pointer;
}
input[type="checkbox"] {
cursor: pointer;
}
#clipper-bar .btn {
background-repeat: no-repeat;
background-position: center;
background-size: 80%;
}
#clipX {
background-image: url('assets/icons/section_x.png');
}
#clipY {
background-image: url('assets/icons/section_y.png');
}
#clipZ {
background-image: url('assets/icons/section_z.png');
}
</style>
</head> </head>
<body data-bs-theme="light"> <body data-bs-theme="light">
<div class="map" id="map" style="height: 100%;"></div> <div class="map" id="map"></div>
<div class="d-none" id="scene">
<div id="toolbar" class="aton-toolbar-top w-100">
<a class="btn aton-btn fs-5" id="back" title="Torna alla mappa">
<i class="bi bi-map-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
<i class="bi bi-gear-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
<i class="bi bi-scissors"></i>
</a>
<div class="d-none w-25
position-absolute
top-0 start-50
translate-middle bg-light
px-4 pt-2 pb-2 bg-opacity-50
rounded-bottom-3
mt-4 text-dark text-center"
id="clipper-bar">
<span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
</div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
<i class="bi bi-list"></i>
</a>
</div>
<!-- TODO CSS-only popover -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
<div class="aton-poweredby" >
<a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
</div>
</div>
<!-- Info / media modal -->
<div class="modal fade" id="audio1" tabindex="-1" aria-labelledby="audio1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2 class="fs-5 font-bold text-center">Informazioni</h2>
<p class="mt-2">
L'aria "Che fiero costume" bla bla...
</p>
<p>
Lorem ipsum dolor...
</p>
<h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
<audio class="w-100 p-2 mt-1" src="./assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
</body> </body>

21
js/main.js
View File

@ -1,5 +1,4 @@
import Map from "./map.js"; import Map from "./map.js";
import Scene from "./scene.js";
/* /*
Main js entry for ATON web-app Main js entry for ATON web-app
@ -7,30 +6,10 @@ import Scene from "./scene.js";
// Realize our app // Realize our app
let APP = ATON.App.realize(); let APP = ATON.App.realize();
APP.UI = {};
/**
*
* @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
*/
APP.UI.pauseAudio = function(triggerSelector) {
// What if more than one audio element is playing?
const audio = document.querySelector('audio');
document.querySelectorAll(triggerSelector).forEach(el => {
el.addEventListener('click', () => audio.pause());
});
document.querySelector('.modal').addEventListener('blur', () => {
audio.pause();
});
}
// APP.setup() is required for web-app initialization // APP.setup() is required for web-app initialization
// You can place here UI setup (HTML), events handling, etc. // You can place here UI setup (HTML), events handling, etc.
APP.setup = ()=>{ APP.setup = ()=>{
Map.init('map'); Map.init('map');
APP.UI.pauseAudio('[data-bs-dismiss="modal"');
//APP.UI.showClipper('#clipper');
}; };
/* If you plan to use an update routine (executed continuously), you can place its logic here. /* If you plan to use an update routine (executed continuously), you can place its logic here.

11
js/map.js
View File

@ -1,7 +1,6 @@
// Global Leaflet and ATON // Global Leaflet and ATON
import {config} from '../config.js'; import {config} from '../config.js';
import Scene from './scene.js';
import AppState from './state.js'; import AppState from './state.js';
const Map = {}; const Map = {};
@ -29,7 +28,7 @@ Map.init = function(mapContainerId) {
const popup = this.domParser.parseFromString(marker.popup, 'text/html') const popup = this.domParser.parseFromString(marker.popup, 'text/html')
.querySelector('div'); .querySelector('div');
popup.querySelector('button').onclick = () => { popup.querySelector('button').onclick = () => {
Scene.openScene(marker); this.goToScene(marker.uri);
map.getContainer().classList.toggle('d-none'); map.getContainer().classList.toggle('d-none');
}; };
@ -41,4 +40,12 @@ Map.init = function(mapContainerId) {
AppState.map = map; AppState.map = map;
} }
/**
*
* @param {String} uri The scene's absolute URI (from config)
*/
Map.goToScene = function (uri) {
location.href = uri;
}
export default Map; export default Map;

151
js/scene.js
View File

@ -8,6 +8,20 @@ const Scene = {};
Scene.UI = {}; Scene.UI = {};
Scene.UI.domParser = new DOMParser; Scene.UI.domParser = new DOMParser;
/**
*
* @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
*/
Scene.UI.pauseAudio = function(triggerSelector) {
// What if more than one audio element is playing?
const audio = document.querySelector('audio');
document.querySelectorAll(triggerSelector).forEach(el => {
el.addEventListener('click', () => audio.pause());
});
document.querySelector('.modal').addEventListener('blur', () => {
audio.pause();
});
}
/** /**
* Resets the UI state (essentially hides the clipper toolbar if visible...) * Resets the UI state (essentially hides the clipper toolbar if visible...)
@ -32,10 +46,11 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
() => { () => {
toolbar.classList.toggle('d-none'); toolbar.classList.toggle('d-none');
const aoCurrentState = AppState.ambientOcclusion; const aoCurrentState = AppState.ambientOcclusion;
if (!AppState.clipping.enabled) {
if (!toolbar.classList.contains('d-none')) {
AppState.clipping.enabled = true; AppState.clipping.enabled = true;
if (AppState.clipping.controls) AppState.clipping.controls.enabled = true; //if (AppState.clipping.controls) AppState.clipping.controls.enabled = true;
Scene.toggleAmbientOcclusion(false); Scene.toggleAmbientOcclusion(false);
@ -46,7 +61,6 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
trigger.className += ' border border-2 border-white'; trigger.className += ' border border-2 border-white';
toolbar.addEventListener('click', event => { toolbar.addEventListener('click', event => {
console.log('Clipping target:', event.target);
if (event.target.id === 'clipX') { if (event.target.id === 'clipX') {
// Clip along X... // Clip along X...
Scene.addClippingPlane('x', -1); Scene.addClippingPlane('x', -1);
@ -80,7 +94,6 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
} }
}); });
} else { } else {
AppState.clipping.enabled = false;
Scene.resetClipping(); Scene.resetClipping();
let noBorder = trigger.className.replace(/ border.*$/g, ''); let noBorder = trigger.className.replace(/ border.*$/g, '');
trigger.className = noBorder; trigger.className = noBorder;
@ -155,37 +168,40 @@ Scene.createClippingPlaneMesh = function (boundingSphere) {
/** /**
* *
* @param {THREE.Mesh} planeMesh * @param {THREE.Mesh} planeMesh
* @param {THREE.ArrowHelper} arrowHelper
* @param {String} axis * @param {String} axis
*/ */
Scene.dragClipper = function(planeMesh, axis) { Scene.dragClipper = function(planeMesh, axis) {
const controls = new THREE.DragControls( const controls = new THREE.DragControls(
[planeMesh], [planeMesh],
AppState.camera, ATON.Nav._camera,
AppState.renderer.domElement, ATON._renderer.domElement,
); );
const startPosition = new THREE.Vector3(); const startPosition = new THREE.Vector3();
// Only move along the selected axis (exlude the others) // Only move along the selected axis (exlude the others)
const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis); const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
controls.addEventListener('dragstart', function (event) { if (AppState.clipping.enabled && AppState.clipping.vector) {
startPosition.copy(event.object.position); controls.addEventListener('dragstart', function (event) {
ATON.Nav.setUserControl(false); startPosition.copy(event.object.position);
}); ATON.Nav.setUserControl(false);
});
controls.addEventListener('drag', function(event) { controls.addEventListener('drag', function(event) {
const point = event.object.position; const point = event.object.position;
Scene.updateClipper(AppState.clipping.vector, point); Scene.updateClipper(AppState.clipping.vector, point);
for (const a of excludedAxes) { for (const a of excludedAxes) {
event.object.position[a] = startPosition[a]; event.object.position[a] = startPosition[a];
} }
}); });
controls.addEventListener('dragend', function (event) { controls.addEventListener('dragend', function (event) {
ATON.Nav.setUserControl(true); ATON.Nav.setUserControl(true);
}); });
AppState.clipping.controls = controls; AppState.clipping.controls = controls;
}
} }
/** /**
@ -221,6 +237,7 @@ Scene.addClippingPlane = function(axis, orientation = -1) {
* @param {?THREE.Vector3} point - The queried scene point * @param {?THREE.Vector3} point - The queried scene point
*/ */
Scene.activateClipper = function(vector, axis, point = null) { Scene.activateClipper = function(vector, axis, point = null) {
ATON.enableClipPlanes();
Scene.updateClipper(vector, point); Scene.updateClipper(vector, point);
Scene.dragClipper(AppState.clipping.helper, axis); Scene.dragClipper(AppState.clipping.helper, axis);
} }
@ -231,22 +248,25 @@ Scene.activateClipper = function(vector, axis, point = null) {
* @param {THREE.Vector3} point * @param {THREE.Vector3} point
*/ */
Scene.updateClipper = function(vector, point) { Scene.updateClipper = function(vector, point) {
// Normal of the clipping plane along the Y axis facing down // Useless guard...
const normal = new THREE.Vector3(...vector).normalize(); if (vector) {
const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point); // Normal of the clipping plane along the axis facing down
// Add a visible plane helper for the clipping plane const normal = new THREE.Vector3(...vector).normalize();
const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere); const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
// Add a visible plane helper for the clipping plane
const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere);
if (!AppState.clipping.helper) { if (!AppState.clipping.helper) {
AppState.root.add(visiblePlane); AppState.root.add(visiblePlane);
AppState.clipping.helper = visiblePlane; AppState.clipping.helper = visiblePlane;
}
visiblePlane.position.copy(point);
visiblePlane.lookAt(point.clone().add(normal));
plane.setFromNormalAndCoplanarPoint(normal, point);
AppState.clipping.plane = plane;
} }
visiblePlane.position.copy(point);
visiblePlane.lookAt(point.clone().add(normal));
plane.setFromNormalAndCoplanarPoint(normal, point);
AppState.clipping.plane = plane;
} }
/** /**
@ -402,7 +422,7 @@ Scene.init = function() {
ATON.UI.addBasicEvents(); ATON.UI.addBasicEvents();
ATON.UI.init(); ATON.UI.init();
// All assets for this app are stored here // All assets for this app are stored here
ATON.setPathCollection('./assets/'); ATON.setPathCollection('/a/scaenae/assets/');
// Initial light direction // Initial light direction
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7)); ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
ATON.toggleShadows(true); ATON.toggleShadows(true);
@ -416,37 +436,21 @@ Scene.init = function() {
ATON.Nav.setUserControl(true); ATON.Nav.setUserControl(true);
} }
/**
* @param {String} btnId - The back-to-map button id
*/
Scene.closeScene = function() {
const scene = document.querySelector('#scene');
scene.classList.toggle('d-none');
const canvas = ATON._renderer?.domElement;
Scene.resetClipping();
AppState.root.clear();
// Ensure GPU resources are freed...
ATON.renderPause();
AppState.renderer.dispose();
ATON._renderer.dispose();
ATON.Nav._camera = undefined;
Scene.UI.reset();
document.querySelector('#map').classList.toggle('d-none');
AppState.map.invalidateSize();
AppState.resetSceneState(AppState.map);
// Remove ATON's canvas from the DOM
if (canvas && canvas.parentElement) {
canvas.parentElement.removeChild(canvas);
}
}
Scene.resetClipping = function () { Scene.resetClipping = function () {
AppState.clipping.controls?.dispose();
AppState.clipping.controls = null; console.warn('Resetting clipping!!');
ATON.disableClipPlanes();
AppState.clipping.enabled = false; AppState.clipping.enabled = false;
ATON.disableClipPlanes();
AppState.clipping.controls.deactivate();
// Manually remove event listeners from DragControls!!
AppState.renderer.domElement.removeEventListener( 'pointermove', AppState.clipping.controls.onPointerMove );
AppState.renderer.domElement.removeEventListener( 'pointerdown', AppState.clipping.controls.onPointerDown );
AppState.renderer.domElement.removeEventListener( 'pointerup', AppState.clipping.controls.onPointerCancel );
AppState.renderer.domElement.removeEventListener( 'pointerleave', AppState.clipping.controls.onPointerCancel )
AppState.clipping.controls = null;
AppState.clipping.helper.removeFromParent();
AppState.root.remove(AppState.clipping.helper); AppState.root.remove(AppState.clipping.helper);
AppState.clipping.helper = null; AppState.clipping.helper = null;
AppState.clipping.plane = null; AppState.clipping.plane = null;
@ -458,27 +462,10 @@ Scene.resetClipping = function () {
* @param {Object} marker - The marker object from config * @param {Object} marker - The marker object from config
*/ */
Scene.openScene = function(marker) { Scene.openScene = function(marker) {
//let canvas = document.querySelector('canvas');
let scene = document.querySelector('#scene');
Scene.init(); Scene.init();
// Button to go back to the map...
const btn = document.querySelector('#back');
btn.addEventListener('click', () => {
Scene.closeScene('back');
});
Scene.UI.toggleClipper('#clipper', '#clipper-bar'); Scene.UI.toggleClipper('#clipper', '#clipper-bar');
scene.classList.toggle('d-none');
ATON.renderResume();
if (!AppState.scenes.find(s => s.id === marker.id)) {
const newScene = {id: marker.id, active: false, current: true};
AppState.scenes.push(newScene);
}
// Load 3D model then // Load 3D model then
let mainNode = ATON.createSceneNode(marker.label); let mainNode = ATON.createSceneNode(marker.label);
mainNode.load(marker.model); mainNode.load(marker.model);
@ -501,8 +488,6 @@ Scene.openScene = function(marker) {
AppState.root = ATON.getRootScene(); AppState.root = ATON.getRootScene();
// ATON.Node.getBound() returns a THREE.Sphere object // ATON.Node.getBound() returns a THREE.Sphere object
AppState.clipping.boundingSphere = mainNode.getBound(); AppState.clipping.boundingSphere = mainNode.getBound();
console.log(ATON.Nav._camera);
} }
export default Scene; export default Scene;

4
js/state.js
View File

@ -8,7 +8,6 @@ let AppState = {
initialRotation: null, initialRotation: null,
camera: null, camera: null,
renderer: null, renderer: null,
scenes : [],
ambientOcclusion : true, ambientOcclusion : true,
shadows : true, shadows : true,
lightProbe : false, lightProbe : false,
@ -19,6 +18,7 @@ let AppState = {
controls: null, controls: null,
onDrag: null, onDrag: null,
helper : null, helper : null,
arrow : null,
boundingSphere: null, boundingSphere: null,
listeners: { listeners: {
button: false, button: false,
@ -39,7 +39,6 @@ let AppState = {
initialRotation: null, initialRotation: null,
camera: null, camera: null,
renderer: null, renderer: null,
scenes : [],
ambientOcclusion : true, ambientOcclusion : true,
shadows : true, shadows : true,
lightProbe : false, lightProbe : false,
@ -50,6 +49,7 @@ let AppState = {
controls: null, controls: null,
onDrag: null, onDrag: null,
helper : null, helper : null,
arrow : null,
boundingSphere: null, boundingSphere: null,
listeners: { listeners: {
button: false, button: false,

89
scenes/salvador/index.html Normal file
View File

@ -0,0 +1,89 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="../../appicon.png" sizes="512x512" type="image/png">
<!-- Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="SCAENE">
<link rel="apple-touch-icon" href="appicon.png">
<!-- OpenGraph tags -->
<meta property="og:title" content="SCAENE" />
<meta property="og:description" content="Web App 3D per il progetto PRIN 'SCAENAE'" />
<meta property="og:image" content="../../appicon.png" />
<meta property="og:image:secure_url" content="../../appicon.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<!-- Web-app ID -->
<meta name="aton:appid" content="app_scaenae">
<meta name="title" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
<meta name="description" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
<!-- Add meta theme-color -->
<meta name="theme-color" content="#000000" />
<title>SCAENE</title>
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="/res/css/main.css">
<link rel="stylesheet" type="text/css" href="../../css/app.css">
<!-- Vendors -->
<script type="text/javascript" src="/vendors/vendors.min.js"></script>
<script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/dist/THREE.bundle.js"></script>
<script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
<script type="text/javascript" src="/dist/ATON.min.js"></script>
<!-- Main js entry -->
<script type="module" src="./index.js"></script>
</head>
<body data-bs-theme="light">
<div id="toolbar" class="aton-toolbar-top w-100">
<a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
<i class="bi bi-map-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
<i class="bi bi-gear-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
<i class="bi bi-scissors"></i>
</a>
<div class="d-none w-25
position-absolute
top-0 start-50
translate-middle bg-light
px-4 pt-2 pb-2 bg-opacity-50
rounded-bottom-3
mt-4 text-dark text-center"
id="clipper-bar">
<span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
</div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
<i class="bi bi-list"></i>
</a>
</div>
<!-- TODO CSS-only popover -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
<div class="aton-poweredby" >
<a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
</div>
</body>

4
scenes/salvador/index.js Normal file
View File

@ -0,0 +1,4 @@
import Scene from "../../js/scene.js";
import { config } from "../../config.js";
Scene.openScene(config.markers.find(m => m.id === 'salvador'));

89
scenes/ssgp/index.html Normal file
View File

@ -0,0 +1,89 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="../../appicon.png" sizes="512x512" type="image/png">
<!-- Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="SCAENE">
<link rel="apple-touch-icon" href="appicon.png">
<!-- OpenGraph tags -->
<meta property="og:title" content="SCAENE" />
<meta property="og:description" content="Web App 3D per il progetto PRIN 'SCAENAE'" />
<meta property="og:image" content="../../appicon.png" />
<meta property="og:image:secure_url" content="../../appicon.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<!-- Web-app ID -->
<meta name="aton:appid" content="app_scaenae">
<meta name="title" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
<meta name="description" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
<!-- Add meta theme-color -->
<meta name="theme-color" content="#000000" />
<title>SCAENE</title>
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="/res/css/main.css">
<link rel="stylesheet" type="text/css" href="../../css/app.css">
<!-- Vendors -->
<script type="text/javascript" src="/vendors/vendors.min.js"></script>
<script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/dist/THREE.bundle.js"></script>
<script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
<script type="text/javascript" src="/dist/ATON.min.js"></script>
<!-- Main js entry -->
<script type="module" src="./index.js"></script>
</head>
<body data-bs-theme="light">
<div id="toolbar" class="aton-toolbar-top w-100">
<a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
<i class="bi bi-map-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
<i class="bi bi-gear-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
<i class="bi bi-scissors"></i>
</a>
<div class="d-none w-25
position-absolute
top-0 start-50
translate-middle bg-light
px-4 pt-2 pb-2 bg-opacity-50
rounded-bottom-3
mt-4 text-dark text-center"
id="clipper-bar">
<span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
</div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
<i class="bi bi-list"></i>
</a>
</div>
<!-- TODO CSS-only popover -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
<div class="aton-poweredby" >
<a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
</div>
</body>

4
scenes/ssgp/index.js Normal file
View File

@ -0,0 +1,4 @@
import Scene from "../../js/scene.js";
import { config } from "../../config.js";
Scene.openScene(config.markers.find(m => m.id === 'ssgp'));