Reorganize side panel + scene state (WIP)
This commit is contained in:
parent
76a489e573
commit
d29d887b4c
147
js/scene.js
147
js/scene.js
@ -1,7 +1,11 @@
|
||||
// Global ATON
|
||||
|
||||
import { getSceneStatus } from "./state.js";
|
||||
import { setSceneStatus } from "./state.js";
|
||||
|
||||
const material = {
|
||||
color: "#e6f2ff",
|
||||
color: "#fff",
|
||||
//color: "#e6f2ff",
|
||||
emissive: true,
|
||||
};
|
||||
|
||||
@ -12,22 +16,63 @@ const Scene = {};
|
||||
* @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);
|
||||
const edgeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
|
||||
|
||||
console.log(object);
|
||||
object.traverse(function(child) {
|
||||
|
||||
if (child.isMesh) {
|
||||
let edges = new THREE.EdgesGeometry(child.geometry, 45);
|
||||
let line = new THREE.LineSegments(edges, edgeMaterial);
|
||||
child.add(line);
|
||||
|
||||
console.log(child);
|
||||
}
|
||||
});
|
||||
/*
|
||||
const rootUI = ATON.getRootUI();
|
||||
rootUI.traverse(object => APP.showEdges(object));
|
||||
rootUI.traverse(object => Scene.showEdges(object));
|
||||
*/
|
||||
}
|
||||
|
||||
Scene.changeLightDirection = function(x, y = -0.3, z = -0.7) {
|
||||
ATON.setMainLightDirection(new THREE.Vector3(x, y, z));
|
||||
/**
|
||||
*
|
||||
* @param {{x,y,z}} vector
|
||||
*/
|
||||
Scene.changeLightDirection = function(vector) {
|
||||
ATON.setMainLightDirection(new THREE.Vector3(vector.x, vector.y, vector.z));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Boolean} isEnabled
|
||||
*/
|
||||
Scene.toggleAmbientOcclusion = function(isEnabled) {
|
||||
ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {String} direction - The axis direction, one of 'x','y','z'
|
||||
* @param {String} label - The slider label
|
||||
* @param {Number[]} range - The slider's range
|
||||
* @param {Number} step - The slider's step
|
||||
*/
|
||||
Scene.createLightSlider = function(direction, label, range, step) {
|
||||
const lightSlider = ATON.UI.createSlider({
|
||||
range,
|
||||
label,
|
||||
value: 0,
|
||||
oninput: val => {
|
||||
const lightDir = ATON.getMainLightDirection();
|
||||
// Keep existing direction values for the other axes
|
||||
lightDir[direction] = Number.parseFloat(val);
|
||||
this.changeLightDirection(lightDir);
|
||||
},
|
||||
});
|
||||
|
||||
lightSlider.classList.add('ms-4');
|
||||
lightSlider.querySelector('input').step = step;
|
||||
|
||||
return lightSlider;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -38,55 +83,40 @@ Scene.toggleSettingsPanel = function(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';
|
||||
const envHeading = document.createElement('h2');
|
||||
envHeading.className = 'fs-5 ms-2 mb-3 mt-3';
|
||||
envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente';
|
||||
|
||||
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);
|
||||
},
|
||||
});
|
||||
const lightSliderX = this.createLightSlider('x', 'Asse X', [-2, 2], 0.1);
|
||||
const lightSliderY = this.createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
|
||||
const lightSliderZ = this.createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
|
||||
|
||||
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);
|
||||
|
||||
ATON.UI.elSidePanel.appendChild(envHeading);
|
||||
|
||||
const ambientOcclSwitch = document.createElement('div');
|
||||
ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
|
||||
ambientOcclSwitch.innerHTML = `
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" checked title="Abilita / disabilita ambient occlusion">
|
||||
<label class="form-check-label font-italic" for="aoSwitch">Ambient occlusion</label>
|
||||
`;
|
||||
|
||||
const shadowsSwitch = document.createElement('div');
|
||||
shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
|
||||
shadowsSwitch.innerHTML = `
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" checked title="Abilita / disabilita ombre">
|
||||
<label class="form-check-label font-italic" for="shadowsSwitch">Ombre</label>
|
||||
`;
|
||||
|
||||
ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
|
||||
ATON.UI.elSidePanel.appendChild(shadowsSwitch);
|
||||
});
|
||||
}
|
||||
|
||||
@ -102,7 +132,7 @@ Scene.init = function() {
|
||||
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
|
||||
|
||||
ATON.toggleShadows(true);
|
||||
ATON.setExposure(1.3);
|
||||
ATON.setExposure(0.8);
|
||||
// Open settings side panel when clicking on settings btn
|
||||
Scene.toggleSettingsPanel('settings');
|
||||
}
|
||||
@ -119,6 +149,7 @@ Scene.toggleScene = function(id) {
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @todo Load model, pano etc. only if scene hasn't been opened yet
|
||||
* @param {Object} marker - The marker object from config
|
||||
*/
|
||||
Scene.openScene = function(marker) {
|
||||
@ -130,13 +161,23 @@ Scene.openScene = function(marker) {
|
||||
}
|
||||
|
||||
scene.classList.toggle('d-none');
|
||||
|
||||
if (!getSceneStatus(marker.id)) {
|
||||
// Set scene as active
|
||||
setSceneStatus(marker.id, true);
|
||||
// Load 3D model
|
||||
let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
|
||||
ATON.setMainPanorama(marker.pano);
|
||||
mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
|
||||
//mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
|
||||
mainNode.setRotation(0, 1.5, 0)
|
||||
Scene.showEdges(mainNode);
|
||||
|
||||
mainNode.attachToRoot();
|
||||
|
||||
ATON.setAutoLP(true);
|
||||
Scene.toggleAmbientOcclusion(true);
|
||||
}
|
||||
//const rootUI = ATON.getRootUI();
|
||||
}
|
||||
|
||||
export default Scene;
|
||||
27
js/state.js
Normal file
27
js/state.js
Normal file
@ -0,0 +1,27 @@
|
||||
export const AppState = {
|
||||
scenes : [
|
||||
{
|
||||
id : "salvador",
|
||||
active : false
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
/**
|
||||
* @todo Buggyyyyy!!!!
|
||||
* @param {String} id
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function getSceneStatus(id) {
|
||||
return AppState.scenes.find(s => s.id === id).active;
|
||||
}
|
||||
|
||||
/**
|
||||
* @todo Buggyyyyy!!!!
|
||||
* @param {String} id
|
||||
* @param {Boolean} status
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function setSceneStatus(id, status) {
|
||||
return AppState.scenes.find(s => s.id === id).active = status;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user