add lighting choices

anthologen · Feb 20, 2021 · 77cc650 · 77cc650
1 parent a33d524
commit 77cc650
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 10 deletions.
diff --git a/app.js b/app.js
@@ -18,9 +18,6 @@ document.getElementById("viewport").appendChild(renderer.domElement);
 
 const controls = new OrbitControls(camera, renderer.domElement);
 
-const ambientLight = new THREE.AmbientLight(0x404040, 8);
-scene.add(ambientLight);
-
 window.addEventListener('resize', () => {
   let width = window.innerWidth;
   let height = window.innerHeight;
@@ -33,13 +30,118 @@ document.getElementById("backgroundColor").addEventListener('input', (event) =>
   scene.background = new THREE.Color(event.target.value);
 })
 
-document.getElementById("lightColor").addEventListener('input', (event) => {
-  ambientLight.color = new THREE.Color(event.target.value);
-})
+function LightSelection() {
+  var ambientLight = new THREE.AmbientLight(0x404040, 8);
+  scene.add(ambientLight);
+
+  var pointLight = new THREE.PointLight (0x404040, 8);
+  pointLight.position.set(0, 1, 5);
+  scene.add(pointLight);
+
+  var hemisphereLight = new THREE.HemisphereLight(0x808080, 0x808080, 2);
+  var sunLight = new THREE.DirectionalLight(0x404040, 8);
+  sunLight.position.set(0, 10, 10);
+  sunLight.target.position.set(0, 0, 0);
+  scene.add(hemisphereLight);
+  scene.add(sunLight);
+
+  var lightList = [
+    ambientLight,
+    pointLight,
+    hemisphereLight,
+    sunLight
+  ];
+
+  document.getElementById("lightColor").addEventListener('input', (event) => {
+    let newColor = new THREE.Color(event.target.value);
+    ambientLight.color = newColor;
+    pointLight.color = newColor;
+    sunLight.color = newColor;
+  })
 
-document.getElementById("lightIntensity").addEventListener('input', (event) => {
-  ambientLight.intensity = event.target.valueAsNumber || 0;
-})
+  document.getElementById("lightIntensity").addEventListener('input', (event) => {
+    let newIntensity = event.target.valueAsNumber || 0;
+    ambientLight.intensity = newIntensity;
+    pointLight.intensity = newIntensity;
+    sunLight.intensity = newIntensity;
+  })
+
+  document.getElementById("pointLightXPos").addEventListener('input', (event) => {
+    pointLight.position.x = event.target.valueAsNumber || 0;
+  })
+  document.getElementById("pointLightYPos").addEventListener('input', (event) => {
+    pointLight.position.y = event.target.valueAsNumber || 0;
+  })
+  document.getElementById("pointLightZPos").addEventListener('input', (event) => {
+    pointLight.position.z = event.target.valueAsNumber || 0;
+  })
+
+  document.getElementById("skyColor").addEventListener('input', (event) => {
+    hemisphereLight.color = new THREE.Color(event.target.value);
+  })
+  document.getElementById("groundColor").addEventListener('input', (event) => {
+    hemisphereLight.groundColor = new THREE.Color(event.target.value);
+  })
+  document.getElementById("atmosphereIntensity").addEventListener('input', (event) => {
+    hemisphereLight.intensity = event.target.valueAsNumber || 0;
+  })
+
+  document.getElementById("sunLightXPos").addEventListener('input', (event) => {
+    sunLight.position.x = event.target.valueAsNumber || 0;
+  })
+  document.getElementById("sunLightYPos").addEventListener('input', (event) => {
+    sunLight.position.y = event.target.valueAsNumber || 0;
+  })
+  document.getElementById("sunLightZPos").addEventListener('input', (event) => {
+    sunLight.position.z = event.target.valueAsNumber || 0;
+  })
+
+  document.getElementById("sunLightTargetXPos").addEventListener('input', (event) => {
+    sunLight.target.position.x = event.target.valueAsNumber || 0;
+  })
+  document.getElementById("sunLightTargetYPos").addEventListener('input', (event) => {
+    sunLight.target.position.y = event.target.valueAsNumber || 0;
+  })
+  document.getElementById("sunLightTargetZPos").addEventListener('input', (event) => {
+    sunLight.target.position.z = event.target.valueAsNumber || 0;
+  })
+
+  function chooseLight(lightType) {
+    // Hide all additional options
+    let extraLightSettings = document.querySelectorAll(".lightControl");
+    extraLightSettings.forEach(setting => setting.classList.add("removed"));
+    function showAdditionalSetting(lType) {
+      document.getElementById(`${lType}LightControl`).classList.remove("removed");
+    }
+    lightList.forEach(l => l.visible = false);
+    switch (lightType) {
+      case "ambient":
+        showAdditionalSetting(lightType);
+        ambientLight.visible = true;
+        break;
+      case "point":
+        showAdditionalSetting(lightType);
+        pointLight.visible = true;
+        break;
+      case "outdoor":
+        showAdditionalSetting(lightType);
+        hemisphereLight.visible = true;
+        sunLight.visible = true;
+        break;
+      default:
+        console.error(`Invalid lightType ${lightType}.`);
+    }
+
+  }
+  var lightRadios = document.querySelectorAll('input[type=radio][name=lightType]');
+  lightRadios.forEach(radio => radio.addEventListener('change', () => chooseLight(radio.value)));
+
+  return Object.freeze({
+    chooseLight
+  });
+}
+var lightSelection = LightSelection();
+lightSelection.chooseLight("ambient");
 
 document.getElementById("audioInputFile").onchange = (event) => {
   const uploadedFile = event.target.files[0];

diff --git a/index.css b/index.css
@@ -68,6 +68,10 @@ audio {
   transition: opacity 400ms;
 }
 
+.removed {
+  display: none;
+}
+
 .iconImg {
   width: 16px;
   height: 16px;

diff --git a/index.html b/index.html
@@ -75,8 +75,87 @@ <h4>Lighting</h4>
 							<label for="lightIntensity">Light Intensity</label>
 							<input type="number" id="lightIntensity" min="0" value="8"/>
 						</div>
+						<h5>Light Type</h5>
+						<div class="hEqualSpacing">
+							<div>
+								<input type="radio" id="ambient" name="lightType" value="ambient" checked>
+								<label for="ambient">Flat</label>
+							</div>
+							<div>
+								<input type="radio" id="point" name="lightType" value="point">
+								<label for="ambient">Point</label>
+							</div>
+							<div>
+								<input type="radio" id="outdoor" name="lightType" value="outdoor">
+								<label for="ambient">Outdoor</label>
+							</div>
+						</div>
+						<div id="additionalLightSettings">
+							<div class="lightControl" id="ambientLightControl">
+							</div>
+							<div class="lightControl" id="pointLightControl">
+								<h5>Point Light Position</h5>
+								<div class="hEqualSpacing">
+									<div>
+										<label for="pointLightXPos">X</label>
+										<input type="number" id="pointLightXPos" value="0"/>
+									</div>
+									<div>
+										<label for="pointLightYPos">Y</label>
+										<input type="number" id="pointLightYPos" value="1"/>
+									</div>
+									<div>
+										<label for="pointLightZPos">Z</label>
+										<input type="number" id="pointLightZPos" value="5"/>
+									</div>
+								</div>
+							</div>
+							<div class="lightControl" id="outdoorLightControl">
+								<div class="hEqualSpacing">
+									<label for="skyColor">Sky Colour</label>
+									<input type="color" id="skyColor" value="#808080" />
+								</div>
+								<div class="hEqualSpacing">
+									<label for="groundColor">Ground Colour</label>
+									<input type="color" id="groundColor" value="#808080" />
+								</div>
+								<div class="hEqualSpacing">
+									<label for="atmosphereIntensity">Atmosphere Intensity</label>
+									<input type="number" id="atmosphereIntensity" min="0" value="2"/>
+								</div>
+								<h5>Sun Light Position</h5>
+								<div class="hEqualSpacing">
+									<div>
+										<label for="sunLightXPos">X</label>
+										<input type="number" id="sunLightXPos" value="0"/>
+									</div>
+									<div>
+										<label for="sunLightYPos">Y</label>
+										<input type="number" id="sunLightYPos" value="10"/>
+									</div>
+									<div>
+										<label for="sunLightZPos">Z</label>
+										<input type="number" id="sunLightZPos" value="10"/>
+									</div>
+								</div>
+								<h5>Sun Light Target Coordinate</h5>
+								<div class="hEqualSpacing">
+									<div>
+										<label for="sunLightTargetXPos">X</label>
+										<input type="number" id="sunLightTargetXPos" value="0"/>
+									</div>
+									<div>
+										<label for="sunLightTargetYPos">Y</label>
+										<input type="number" id="sunLightTargetYPos" value="0"/>
+									</div>
+									<div>
+										<label for="sunLightTargetZPos">Z</label>
+										<input type="number" id="sunLightTargetZPos" value="0"/>
+									</div>
+								</div>
+							</div>
+						</div>
 					</div>
-
 					<div>
 						<h4>Special</h4>
 						<div class="hEqualSpacing">