Restructure to use separate scenes
Uses pseudo-router logic...
This commit is contained in:
parent
8c1da5e4e2
commit
e85bd4f959
1
.gitignore
vendored
1
.gitignore
vendored
@ -7,3 +7,4 @@
|
||||
*.obj
|
||||
|
||||
vendor/
|
||||
.vscode
|
||||
|
||||
BIN
assets/icons/section_z.png
Executable file
BIN
assets/icons/section_z.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
18
config.js
18
config.js
@ -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
26
css/app.css
Normal 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
97
index.html
@ -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
21
js/main.js
@ -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
11
js/map.js
@ -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;
|
||||
95
js/scene.js
95
js/scene.js
@ -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,19 +168,21 @@ 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);
|
||||
|
||||
if (AppState.clipping.enabled && AppState.clipping.vector) {
|
||||
controls.addEventListener('dragstart', function (event) {
|
||||
startPosition.copy(event.object.position);
|
||||
ATON.Nav.setUserControl(false);
|
||||
@ -186,6 +201,7 @@ Scene.dragClipper = function(planeMesh, axis) {
|
||||
});
|
||||
|
||||
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,7 +248,9 @@ 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
|
||||
// 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
|
||||
@ -247,6 +266,7 @@ Scene.updateClipper = function(vector, point) {
|
||||
|
||||
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;
|
||||
@ -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
89
scenes/salvador/index.html
Normal 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
4
scenes/salvador/index.js
Normal 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
89
scenes/ssgp/index.html
Normal 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
4
scenes/ssgp/index.js
Normal 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'));
|
||||
Loading…
Reference in New Issue
Block a user