Styling changes + tooltips and defaults

This commit is contained in:
2026-05-11 11:31:38 +02:00
parent cabfe687e2
commit 589b551558
8 changed files with 142 additions and 47 deletions

View File

@@ -1,3 +1,5 @@
/** @import { Vector3 } from 'three' */
// Global ATON and THREE
import AppState from "../state.js";
@@ -7,8 +9,7 @@ import AppState from "../state.js";
*/
/**
*
* @param {THREE.Vector3} vector - An object with x,y,z coordinates
* @param {Vector3} vector - An object with x,y,z coordinates
*/
export function changeLightDirection(vector) {
ATON.setMainLightDirection(vector);
@@ -26,14 +27,12 @@ export function toggleAmbientOcclusion(isEnabled) {
* 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 {Array<Number>} range - The slider's range
* @param {[number, number]} range - The slider's range
* @param {Number} step - The slider's step
*/
export function createLightSlider(direction, label, range, step) {
const currentVal = AppState.lightDirection[direction];
console.debug(currentVal);
const lightSlider = ATON.UI.createSlider({
range,
label,
@@ -48,19 +47,20 @@ export function createLightSlider(direction, label, range, step) {
},
});
lightSlider.classList.add('ms-4');
lightSlider.querySelector('input').step = step;
lightSlider.classList.add('ms-1');
const input = lightSlider.querySelector('input');
if (input) input.step = step;
return lightSlider;
}
/**
* Slider to change the env exposure level, based on ATON.UI
* @param {String} label - The slider label
* @param {Array<Number>} range - The slider's range
* @param {[number, number]} range - The slider's range
* @param {Number} step - The slider's step
*/
export function createExposureSlider(label, range, step = 0.05) {
const currentVal = AppState.exposure;
const currentVal = String(AppState.exposure);
const exposureSlider = ATON.UI.createSlider({
range,
@@ -74,8 +74,9 @@ export function createExposureSlider(label, range, step = 0.05) {
},
});
exposureSlider.classList.add('ms-4');
exposureSlider.querySelector('input').step = step;
exposureSlider.classList.add('ms-1');
let input = exposureSlider.querySelector('input');
if (input) input.step = step;
return exposureSlider;
}