142 lines
4.4 KiB
JavaScript
142 lines
4.4 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));
|
|
*/
|
|
}
|
|
|
|
Scene.changeLightDirection = function(x, y = -0.3, z = -0.7) {
|
|
ATON.setMainLightDirection(new THREE.Vector3(x, y, z));
|
|
}
|
|
|
|
/**
|
|
* @param {String} id - The settings button id
|
|
*/
|
|
Scene.toggleSettingsPanel = function(id) {
|
|
const btn = document.querySelector(`#${id}`);
|
|
const lightHeading = document.createElement('h2');
|
|
lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
|
|
lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';
|
|
|
|
btn.addEventListener('click', () => {
|
|
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
|
|
ATON.UI.elSidePanel.appendChild(lightHeading);
|
|
|
|
const lightSliderX = ATON.UI.createSlider({
|
|
range: [-2, 2],
|
|
label: 'Asse X',
|
|
value: 0,
|
|
oninput: val => {
|
|
const lightDir = ATON.getMainLightDirection();
|
|
console.log(lightDir);
|
|
// Keep existing Y and Z direction values
|
|
this.changeLightDirection(val, lightDir.y, lightDir.z);
|
|
},
|
|
});
|
|
const lightSliderY = ATON.UI.createSlider({
|
|
range: [-2, 2],
|
|
label: 'Asse Y',
|
|
value: 0,
|
|
oninput: val => {
|
|
const lightDir = ATON.getMainLightDirection();
|
|
console.log(lightDir);
|
|
// Keep existing X and Z direction values
|
|
this.changeLightDirection(lightDir.x, val, lightDir.z);
|
|
},
|
|
});
|
|
const lightSliderZ = ATON.UI.createSlider({
|
|
range: [-2, 2],
|
|
label: 'Asse Z',
|
|
value: 0,
|
|
oninput: val => {
|
|
const lightDir = ATON.getMainLightDirection();
|
|
console.log(lightDir);
|
|
// Keep existing X and Y direction values
|
|
this.changeLightDirection(lightDir.x, lightDir.y, val);
|
|
},
|
|
});
|
|
|
|
lightSliderX.classList.add('ms-4');
|
|
lightSliderY.classList.add('ms-4');
|
|
lightSliderZ.classList.add('ms-4');
|
|
// Set step to 0.1 for the range input
|
|
lightSliderX.querySelector('input').step = 0.1;
|
|
lightSliderY.querySelector('input').step = 0.1;
|
|
lightSliderZ.querySelector('input').step = 0.1;
|
|
ATON.UI.elSidePanel.appendChild(lightSliderX);
|
|
ATON.UI.elSidePanel.appendChild(lightSliderY);
|
|
ATON.UI.elSidePanel.appendChild(lightSliderZ);
|
|
});
|
|
}
|
|
|
|
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 settings 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');
|
|
});
|
|
}
|
|
/**
|
|
* @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');
|
|
// Load 3D model
|
|
let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
|
|
ATON.setMainPanorama(marker.pano);
|
|
mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
|
|
mainNode.setRotation(0, 1.5, 0)
|
|
|
|
mainNode.attachToRoot();
|
|
}
|
|
|
|
export default Scene; |