diff --git a/.yarnc b/.yarnrc similarity index 100% rename from .yarnc rename to .yarnrc diff --git a/js/scene.js b/js/scene.js index ccb3b6f..44aea8d 100644 --- a/js/scene.js +++ b/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 = ' Direzione luce'; + const envHeading = document.createElement('h2'); + envHeading.className = 'fs-5 ms-2 mb-3 mt-3'; + envHeading.innerHTML = ' Ambiente'; btn.addEventListener('click', () => { ATON.UI.showSidePanel({header: ' 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 = ` + + + `; + + const shadowsSwitch = document.createElement('div'); + shadowsSwitch.className = 'form-check form-switch ms-4 mt-2'; + shadowsSwitch.innerHTML = ` + + + `; + + 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'); - // 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(); + 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.setRotation(0, 1.5, 0) + Scene.showEdges(mainNode); + + mainNode.attachToRoot(); + + ATON.setAutoLP(true); + Scene.toggleAmbientOcclusion(true); + } + //const rootUI = ATON.getRootUI(); } export default Scene; \ No newline at end of file diff --git a/js/state.js b/js/state.js new file mode 100644 index 0000000..983dc58 --- /dev/null +++ b/js/state.js @@ -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; +} \ No newline at end of file