Fakultas Ilmu Komputer UI

Commit 2f5085eb authored by Rachmat Ridwan's avatar Rachmat Ridwan
Browse files

Refactor light slider name and make cube move on light slider change

parent 4fb8032b
......@@ -240,19 +240,19 @@ void main()
<label>X<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="lightPositionX" value="0" min="-10" max="10" class="custom-range range-speed">
<input type="range" step="0.01" name="light-position-x" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
<div class="slider-container">
<label>Y<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="lightPositionY" value="0" min="-10" max="10" class="custom-range range-speed">
<input type="range" step="0.01" name="light-position-y" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
<div class="slider-container">
<label>Z<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="lightPositionZ" value="0" min="-10" max="10" class="custom-range range-speed">
<input type="range" step="0.01" name="light-position-z" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
</div>
</div>
......
......@@ -146,17 +146,27 @@ function connectSpeedSlider() {
}
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) {
document.querySelectorAll('input[name^=light-position]').forEach(slider => {
const valueDisplay = slider.parentElement.querySelector('.slider-value');
const name = slider.getAttribute('name');
const positionAxisName = name.match(/light-position-(x|y|z)$/)[1];
const axisId = ['x', 'y', 'z'].indexOf(positionAxisName);
let value = lightingCubeModel.location[axisId];
valueDisplay.innerText = value;
slider.value = value;
slider.addEventListener('input', function (event) {
let value = parseFloat(event.target.value);
lightingCubeModel.location[axisId] = value;
lightingCubeModel.updateMatrices();
sceneGraph.updateLightSetup({position: lightingCubeModel.location});
sceneGraph.updateGlLightPosition();
valueDisplay.innerText = value;
sceneGraph[name] = value;
sceneGraph.updateLightPosition();
});
});
}
......@@ -376,16 +386,16 @@ window.addEventListener('load', function init() {
modelsVerticesData: objects_vertices, // this is a variable inside objects-vertices.js
modelsInfoData: objects_info // this is a variable inside objects-data.js
})
createCubeLight()
sceneGraph.movePointsToBufferData()
sceneGraph.updateModelsTransformations()
sceneGraph.updateLightPosition()
sceneGraph.updateLightSetup({
position: lightingCubeModel.location
})
// sceneGraph.createCube()
sceneGraph.updateGlLightPosition()
animationManager = new AnimationManager({
sceneGraph,
......
......@@ -151,14 +151,14 @@ class SceneGraph {
}
if (position) {
this.lightPosition = [position[0], position[1], position[2], 0.0]
this.updateLightPosition()
this.updateGlLightPosition()
}
if (isChangingParameters) {
this.updateMaterialsLighting()
}
}
updateLightPosition() {
updateGlLightPosition() {
this.gl.uniform4fv(this.glLocations.lightPosition, flatten(this.lightPosition))
}
......
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