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
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 = `
<div class="text-center">
<h1 class="fs-4">Teatro San Salvador, Venezia</h1>
@ -30,24 +32,28 @@ export const config = {
{
id : "salvador",
label : "Teatro San Salvador, Venezia",
uri : `${BASE_URI}/scenes/salvador/`,
popup: theater1Popup,
coords: [45.4363, 12.3352],
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",
label : "Teatro Santi Giovanni e Paolo, Venezia",
uri : `${BASE_URI}/scenes/ssgp/`,
popup: theater2Popup,
coords: [45.4401, 12.3408],
model: "SSGP.glb",
pano: "pano/defsky-grass.jpg",
model: `SSGP.glb`,
//pano: `${BASE_URI}/assets/pano/defsky-grass.jpg`,
pano: `pano/defsky-grass.jpg`,
}
],
map : {
center: [43.570833, 12.140278],
initialZoom : 8,
center: [45.30833, 12.240278],
initialZoom : 12,
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">
<!-- Web-app ID -->
<meta name="aton:appid" content="app_template">
<meta name="aton:appid" content="scaenae">
<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 -->
<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-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">
<link rel="stylesheet" href="./vendor/leaflet/dist/leaflet.css">
<!-- Vendors -->
@ -46,103 +47,13 @@
<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>
<script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
<!-- Main js entry -->
<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>
<body data-bs-theme="light">
<div class="map" id="map" style="height: 100%;"></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>
<div class="map" id="map"></div>
</body>

21
js/main.js
View File

@ -1,5 +1,4 @@
import Map from "./map.js";
import Scene from "./scene.js";
/*
Main js entry for ATON web-app
@ -7,30 +6,10 @@ import Scene from "./scene.js";
// Realize our app
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
// You can place here UI setup (HTML), events handling, etc.
APP.setup = ()=>{
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.

11
js/map.js
View File

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

149
js/scene.js
View File

@ -8,6 +8,20 @@ const Scene = {};
Scene.UI = {};
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...)
@ -32,10 +46,11 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
() => {
toolbar.classList.toggle('d-none');
const aoCurrentState = AppState.ambientOcclusion;
if (!AppState.clipping.enabled) {
if (!toolbar.classList.contains('d-none')) {
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);
@ -46,7 +61,6 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
trigger.className += ' border border-2 border-white';
toolbar.addEventListener('click', event => {
console.log('Clipping target:', event.target);
if (event.target.id === 'clipX') {
// Clip along X...
Scene.addClippingPlane('x', -1);
@ -80,7 +94,6 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
}
});
} else {
AppState.clipping.enabled = false;
Scene.resetClipping();
let noBorder = trigger.className.replace(/ border.*$/g, '');
trigger.className = noBorder;
@ -155,37 +168,40 @@ Scene.createClippingPlaneMesh = function (boundingSphere) {
/**
*
* @param {THREE.Mesh} planeMesh
* @param {THREE.ArrowHelper} arrowHelper
* @param {String} axis
*/
Scene.dragClipper = function(planeMesh, axis) {
const controls = new THREE.DragControls(
[planeMesh],
AppState.camera,
AppState.renderer.domElement,
ATON.Nav._camera,
ATON._renderer.domElement,
);
const startPosition = new THREE.Vector3();
// Only move along the selected axis (exlude the others)
const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
controls.addEventListener('dragstart', function (event) {
startPosition.copy(event.object.position);
ATON.Nav.setUserControl(false);
});
if (AppState.clipping.enabled && AppState.clipping.vector) {
controls.addEventListener('dragstart', function (event) {
startPosition.copy(event.object.position);
ATON.Nav.setUserControl(false);
});
controls.addEventListener('drag', function(event) {
const point = event.object.position;
Scene.updateClipper(AppState.clipping.vector, point);
for (const a of excludedAxes) {
event.object.position[a] = startPosition[a];
}
});
controls.addEventListener('drag', function(event) {
const point = event.object.position;
Scene.updateClipper(AppState.clipping.vector, point);
for (const a of excludedAxes) {
event.object.position[a] = startPosition[a];
}
});
controls.addEventListener('dragend', function (event) {
ATON.Nav.setUserControl(true);
});
controls.addEventListener('dragend', function (event) {
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
*/
Scene.activateClipper = function(vector, axis, point = null) {
ATON.enableClipPlanes();
Scene.updateClipper(vector, point);
Scene.dragClipper(AppState.clipping.helper, axis);
}
@ -231,22 +248,25 @@ Scene.activateClipper = function(vector, axis, point = null) {
* @param {THREE.Vector3} point
*/
Scene.updateClipper = function(vector, point) {
// Normal of the clipping plane along the Y axis facing down
const normal = new THREE.Vector3(...vector).normalize();
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);
// Useless guard...
if (vector) {
// Normal of the clipping plane along the axis facing down
const normal = new THREE.Vector3(...vector).normalize();
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) {
AppState.root.add(visiblePlane);
AppState.clipping.helper = visiblePlane;
}
if (!AppState.clipping.helper) {
AppState.root.add(visiblePlane);
AppState.clipping.helper = visiblePlane;
}
visiblePlane.position.copy(point);
visiblePlane.lookAt(point.clone().add(normal));
visiblePlane.position.copy(point);
visiblePlane.lookAt(point.clone().add(normal));
plane.setFromNormalAndCoplanarPoint(normal, point);
AppState.clipping.plane = plane;
plane.setFromNormalAndCoplanarPoint(normal, point);
AppState.clipping.plane = plane;
}
}
/**
@ -402,7 +422,7 @@ Scene.init = function() {
ATON.UI.addBasicEvents();
ATON.UI.init();
// All assets for this app are stored here
ATON.setPathCollection('./assets/');
ATON.setPathCollection('/a/scaenae/assets/');
// Initial light direction
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
ATON.toggleShadows(true);
@ -416,37 +436,21 @@ Scene.init = function() {
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 () {
AppState.clipping.controls?.dispose();
AppState.clipping.controls = null;
ATON.disableClipPlanes();
console.warn('Resetting clipping!!');
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.clipping.helper = null;
AppState.clipping.plane = null;
@ -458,27 +462,10 @@ Scene.resetClipping = function () {
* @param {Object} marker - The marker object from config
*/
Scene.openScene = function(marker) {
//let canvas = document.querySelector('canvas');
let scene = document.querySelector('#scene');
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.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
let mainNode = ATON.createSceneNode(marker.label);
mainNode.load(marker.model);
@ -501,8 +488,6 @@ Scene.openScene = function(marker) {
AppState.root = ATON.getRootScene();
// ATON.Node.getBound() returns a THREE.Sphere object
AppState.clipping.boundingSphere = mainNode.getBound();
console.log(ATON.Nav._camera);
}
export default Scene;

4
js/state.js
View File

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