diff --git a/js/controllers/toolbar_controller.js b/js/controllers/toolbar_controller.js index b181e58..faa670d 100644 --- a/js/controllers/toolbar_controller.js +++ b/js/controllers/toolbar_controller.js @@ -1,7 +1,7 @@ // Global ATON import { Controller } from "@hotwired/stimulus" import AppState from "../state.js"; -import { createLightSlider } from "../utils/environment.js"; +import { createExposureSlider, createLightSlider } from "../utils/environment.js"; const html = String.raw; const panelHeader = html` @@ -39,12 +39,15 @@ export default class extends Controller { #buildSettingsPanel(panel) { const fragment = this.#cloneTemplate('tmpl-settings'); let sliderContainer = fragment.querySelector('[data-sliders-container]'); + let exposureContainer = fragment.querySelector('[data-slider-exposure-container]'); ['x', 'y', 'z'].forEach((axis, i) => { const label = ['Asse X', 'Asse Y', 'Asse Z'][i]; sliderContainer.appendChild(createLightSlider(axis, label, [-2, 2], 0.1)); }) + exposureContainer.appendChild(createExposureSlider('Valore', [0, 5])); + panel.appendChild(fragment); } } diff --git a/js/scene.js b/js/scene.js index d354c41..27ad263 100644 --- a/js/scene.js +++ b/js/scene.js @@ -43,6 +43,7 @@ function init () { AppState.renderer = ATON._renderer; AppState.shadows = config.scene.shadows; AppState.lightDirection = ATON.getMainLightDirection(); + AppState.exposure = config.scene.initialExposure; ATON.Nav.setUserControl(true); } diff --git a/js/state.js b/js/state.js index 05980bc..aa5177e 100644 --- a/js/state.js +++ b/js/state.js @@ -29,6 +29,10 @@ let AppState = { layersMenuBuilt: false, initialRotation: null, lightDirection: [], + /** + * @type {Number} + */ + exposure: null, camera: null, renderer: null, ambientOcclusion : true, diff --git a/js/utils/environment.js b/js/utils/environment.js index f4f1a8a..2876af5 100644 --- a/js/utils/environment.js +++ b/js/utils/environment.js @@ -23,10 +23,10 @@ export function toggleAmbientOcclusion(isEnabled) { console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF'); } /** - * + * Slider to change light direction, based on ATON.UI * @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 {Array} range - The slider's range * @param {Number} step - The slider's step */ export function createLightSlider(direction, label, range, step) { @@ -52,4 +52,30 @@ export function createLightSlider(direction, label, range, step) { lightSlider.querySelector('input').step = step; return lightSlider; +} +/** + * Slider to change the env exposure level, based on ATON.UI + * @param {String} label - The slider label + * @param {Array} range - The slider's range + * @param {Number} step - The slider's step + */ +export function createExposureSlider(label, range, step = 0.2) { + const currentVal = AppState.exposure; + + const exposureSlider = ATON.UI.createSlider({ + range, + label, + value: Number.parseFloat(currentVal).toPrecision(2), + oninput: val => { + ATON.setExposure(val); + AppState.exposure = val; + + console.debug(ATON.getExposure()); + }, + }); + + exposureSlider.classList.add('ms-4'); + exposureSlider.querySelector('input').step = step; + + return exposureSlider; } \ No newline at end of file diff --git a/scenes/ssgp/index.html b/scenes/ssgp/index.html index 881785c..faf60e0 100644 --- a/scenes/ssgp/index.html +++ b/scenes/ssgp/index.html @@ -99,9 +99,16 @@