92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
// Global ATON
|
|
|
|
const material = {
|
|
color: "#e6f2ff",
|
|
emissive: true,
|
|
};
|
|
|
|
const Scene = {};
|
|
|
|
/**
|
|
* @todo Experimental...
|
|
* @param {THREE.Object3D} object - A THREE Object3D instance
|
|
*/
|
|
Scene.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);
|
|
}
|
|
/*
|
|
const rootUI = ATON.getRootUI();
|
|
rootUI.traverse(object => APP.showEdges(object));
|
|
*/
|
|
}
|
|
|
|
/**
|
|
* @param {String} id - The settings button id
|
|
*/
|
|
Scene.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'});
|
|
})
|
|
}
|
|
|
|
Scene.init = function() {
|
|
console.log("I'm initializing, baby!")
|
|
ATON.realize();
|
|
ATON.UI.addBasicEvents();
|
|
ATON.UI.init();
|
|
ATON.UI.setSidePanelLeft();
|
|
// 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));
|
|
|
|
ATON.toggleShadows(true);
|
|
ATON.setExposure(1.3);
|
|
// Open settings side panel when clicking on btn
|
|
Scene.toggleSettingsPanel('settings');
|
|
}
|
|
/**
|
|
* @param {String} id - The back-to-map button id
|
|
*/
|
|
Scene.toggleScene = function(id) {
|
|
const btn = document.querySelector(`#${id}`);
|
|
const scene = document.querySelector('#scene');
|
|
|
|
btn.addEventListener('click', () => {
|
|
scene.classList.toggle('d-none');
|
|
document.querySelector('#map').classList.toggle('d-none');
|
|
});
|
|
}
|
|
/**
|
|
* @todo This shoudn't be here...
|
|
* @param {Object} marker - The marker object from config
|
|
*/
|
|
Scene.openScene = function(marker) {
|
|
let canvas = document.querySelector('canvas');
|
|
let scene = document.querySelector('#scene');
|
|
|
|
if (canvas === null) {
|
|
Scene.init();
|
|
}
|
|
scene.classList.toggle('d-none');
|
|
console.log(marker.model);
|
|
// Load 3D model
|
|
let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
|
|
// Panorama should be configurable and / or user-defined
|
|
ATON.setMainPanorama(marker.pano);
|
|
mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
|
|
mainNode.setRotation(0, 1.5, 0)
|
|
|
|
//showEdges(mainNode.children[0]);
|
|
mainNode.attachToRoot();
|
|
}
|
|
|
|
export default Scene; |