Fakultas Ilmu Komputer UI

Commit f85a40aa authored by Albertus Angga's avatar Albertus Angga
Browse files

Connect lighting position sliders

parent 85f395b9
......@@ -237,22 +237,22 @@ main()
<div class="submenu">
<h3 class="submenu-title">Lokasi Cahaya</h3>
<div class="slider-container">
<label>Lorem<b>
<label>X<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
<input type="range" step="0.01" name="lightPositionX" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
<div class="slider-container">
<label>Ipsum<b>
<label>Y<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
<input type="range" step="0.01" name="lightPositionY" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
<div class="slider-container">
<label>Dolor<b>
<label>Z<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
<input type="range" step="0.01" name="lightPositionZ" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
</div>
</div>
......
......@@ -140,6 +140,22 @@ function connectSpeedSlider() {
speedValueDisplay.innerText = Math.round(animationManager.speed * 100) + '%';
}
function connectLightPositionSliders() {
document.querySelectorAll('input[name^=light]').forEach(lightPositionSlider => {
const valueDisplay = lightPositionSlider.parentElement.querySelector('.slider-value');
const name = lightPositionSlider.getAttribute('name');
valueDisplay.innerText = sceneGraph[name];
lightPositionSlider.value = `${sceneGraph[name]}`;
lightPositionSlider.addEventListener('input', function(event) {
let value = parseFloat(event.target.value);
valueDisplay.innerText = value;
sceneGraph[name] = value;
sceneGraph.updateLightPosition();
});
});
}
/**
* Update eye coordinate calculation from global
* variables `radius`, `theta`, and `phi`.
......@@ -339,6 +355,7 @@ window.addEventListener('load', function init() {
connectSlidersToModelData()
connectSpeedSlider()
connectLightPositionSliders()
attachListenerOnAnimationUpdate()
if (typeof initObjectSelectionMechanism !== 'undefined') {
......
......@@ -24,7 +24,10 @@ class SceneGraph {
this.materials = {}
this.lightPosition = vec4(0, -10, 10, 0.0)
this.lightPositionX = 0;
this.lightPositionY = -10;
this.lightPositionZ = 10;
this.lightParams = {
ambient: vec4(0.2, 0.2, 0.2, 1.0),
diffuse: vec4(1.0, 1.0, 1.0, 1.0),
......@@ -35,6 +38,23 @@ class SceneGraph {
this.vBuffer = []
}
get lightPosition() {
return vec4(
this.lightPositionX,
this.lightPositionY,
this.lightPositionZ,
0.0
);
}
set lightPosition(lightPosition) {
if (lightPosition.length >= 3) {
this.lightPositionX = lightPosition[0];
this.lightPositionY = lightPosition[1];
this.lightPositionZ = lightPosition[2];
}
}
initMaterialsFromConfig(materialsData) {
materialsData.forEach(material => {
this.materials[material.name] = material
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment