101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
import Map from "./map.js";
|
|
/*
|
|
Main js entry for ATON web-app
|
|
|
|
===============================================*/
|
|
// Realize our app
|
|
let APP = ATON.App.realize();
|
|
|
|
const material = {
|
|
color: "#e6f2ff",
|
|
emissive: true,
|
|
};
|
|
|
|
APP.showEdges = function(object) {
|
|
const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
|
|
if (object.isMesh) {
|
|
let edges = new THREE.EdgesGeometry(object.geometry, 45);
|
|
let line = new THREE.LineSegments(edges, edgeMaterial);
|
|
object.add(line);
|
|
|
|
console.log(object);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {String} id - The settings button id
|
|
*/
|
|
APP.toggleSettingsPanel = function(id) {
|
|
const btn = document.querySelector(`#${id}`);
|
|
|
|
btn.addEventListener('click', () => {
|
|
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
|
|
})
|
|
}
|
|
|
|
/**
|
|
* @param {String} id - The back-to-map button id
|
|
*/
|
|
APP.toggleScene = function(id) {
|
|
const btn = document.querySelector(`#${id}`);
|
|
const scene = document.querySelector('canvas');
|
|
|
|
btn.addEventListener('click', () => {
|
|
scene.classList.toggle('d-none');
|
|
document.querySelector('#map').classList.toggle('d-none');
|
|
Map.init('map');
|
|
});
|
|
}
|
|
|
|
// You can require here flares (plugins) if needed by the app
|
|
//APP.requireFlares(["myFlare","anotherFlare"]);
|
|
|
|
// APP.setup() is required for web-app initialization
|
|
// You can place here UI setup (HTML), events handling, etc.
|
|
APP.setup = ()=>{
|
|
|
|
// Realize base ATON and add base UI events
|
|
ATON.realize();
|
|
ATON.UI.addBasicEvents();
|
|
ATON.UI.init();
|
|
ATON.UI.setSidePanelLeft();
|
|
|
|
// Open settings side panel when clicking on btn
|
|
APP.toggleSettingsPanel('settings');
|
|
APP.toggleScene('back');
|
|
|
|
// All assets for this app are stored here
|
|
ATON.setPathCollection('./assets/');
|
|
// Light direction should be dynamic / user-defined
|
|
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
|
|
|
|
const rootUI = ATON.getRootUI();
|
|
rootUI.traverse(object => APP.showEdges(object));
|
|
|
|
// Load 3D model
|
|
let mainNode = ATON.createSceneNode("teatro").load("teatro_san_salvador_20250926.gltf");
|
|
// Panorama should be configurable and / or user-defined
|
|
const pano = "defsky-grass.jpg";
|
|
ATON.setMainPanorama(pano);
|
|
mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
|
|
mainNode.setRotation(0, 1.5, 0)
|
|
|
|
//showEdges(mainNode.children[0]);
|
|
mainNode.attachToRoot();
|
|
|
|
ATON.toggleShadows(true);
|
|
ATON.setExposure(1.3);
|
|
|
|
// If our app required ore or more flares (plugins), we can also wait for them to be ready for specific setups
|
|
ATON.on("AllFlaresReady",()=>{
|
|
// Do stuff
|
|
console.log("All flares ready");
|
|
});
|
|
};
|
|
|
|
/* If you plan to use an update routine (executed continuously), you can place its logic here.
|
|
APP.update = ()=>{
|
|
|
|
};
|
|
*/
|