refactor: update lighting setup in script.js, adding new light types and GUI controls

pnpm-lock.yaml

@@ -378,8 +378,8 @@ packages:
     resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
     engines: {node: '>=8.6'}
 
-  [email protected].7:
+  [email protected].5:
-    resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
 
   [email protected]:
@@ -644,9 +644,9 @@ snapshots:
       '@esbuild/win32-ia32': 0.25.12
       '@esbuild/win32-x64': 0.25.12
 
-  [email protected]([email protected].7):
+  [email protected]([email protected].5):
     optionalDependencies:
-      picomatch: 4.0.7
+      picomatch: 4.0.5
 
   [email protected]:
     dependencies:
@@ -670,7 +670,7 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected].7: {}
+  [email protected].5: {}
 
   [email protected]:
     dependencies:
@@ -716,8 +716,8 @@ snapshots:
 
   [email protected]:
     dependencies:
-      fdir: 6.5.0([email protected].7)
+      fdir: 6.5.0([email protected].5)
-      picomatch: 4.0.7
+      picomatch: 4.0.5
 
   [email protected]:
     dependencies:
@@ -731,8 +731,8 @@ snapshots:
   [email protected]:
     dependencies:
       esbuild: 0.25.12
-      fdir: 6.5.0([email protected].7)
+      fdir: 6.5.0([email protected].5)
-      picomatch: 4.0.7
+      picomatch: 4.0.5
       postcss: 8.5.26
       rollup: 4.62.5
       tinyglobby: 0.2.17

src/script.js

@@ -17,15 +17,92 @@ const scene = new THREE.Scene();
 /**
  * Lights
  */
-const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
+const ambientLight = new THREE.AmbientLight();
+ambientLight.color = new THREE.Color(0xffffff);
+ambientLight.intensity = 1;
 scene.add(ambientLight);
 
-const pointLight = new THREE.PointLight(0xffffff, 50);
+const ambientLightFolder = gui.addFolder('Ambient Light');
-pointLight.position.x = 2;
+ambientLightFolder.add(ambientLight, 'intensity').min(0).max(3).step(0.001).name('Ambient Light Intensity');
-pointLight.position.y = 3;
+
-pointLight.position.z = 4;
+const directionalLight = new THREE.DirectionalLight();
+directionalLight.color = new THREE.Color(0x00fffc);
+directionalLight.intensity = 0.9;
+directionalLight.position.set(1, .25, 0);
+scene.add(directionalLight);
+
+const directionalLightFolder = gui.addFolder('Directional Light');
+directionalLightFolder.add(directionalLight, 'intensity').min(0).max(3).step(0.001).name('Directional Light Intensity');
+directionalLightFolder.add(directionalLight.position, 'x').min(-5).max(5).step(0.001).name('Directional Light X');
+directionalLightFolder.add(directionalLight.position, 'y').min(-5).max(5).step(0.001).name('Directional Light Y');
+directionalLightFolder.add(directionalLight.position, 'z').min(-5).max(5).step(0.001).name('Directional Light Z');
+
+const hemisphereLight = new THREE.HemisphereLight();
+hemisphereLight.color = new THREE.Color(0xff0000);
+hemisphereLight.groundColor = new THREE.Color(0x0000ff);
+hemisphereLight.intensity = 0.9;
+scene.add(hemisphereLight);
+
+const hemisphereLightFolder = gui.addFolder('Hemisphere Light');
+hemisphereLightFolder.add(hemisphereLight, 'intensity').min(0).max(3).step(0.001).name('Hemisphere Light Intensity');
+hemisphereLightFolder.addColor(hemisphereLight, 'color').name('Hemisphere Light Color');
+hemisphereLightFolder.addColor(hemisphereLight, 'groundColor').name('Hemisphere Light Ground Color');
+
+const pointLight = new THREE.PointLight();
+pointLight.color = new THREE.Color(0xff9000);
+pointLight.distance = 10;
+pointLight.decay = 2;
+pointLight.intensity = 1.5;
+pointLight.position.set(1, -0.5, 1);
 scene.add(pointLight);
 
+const pointLightFolder = gui.addFolder('Point Light');
+pointLightFolder.addColor(pointLight, 'color').name('Point Light Color');
+pointLightFolder.add(pointLight, 'distance').min(0).max(20).step(0.001).name('Point Light Distance');
+pointLightFolder.add(pointLight, 'decay').min(0).max(5).step(0.001).name('Point Light Decay');
+pointLightFolder.add(pointLight, 'intensity').min(0).max(3).step(0.001).name('Point Light Intensity');
+pointLightFolder.add(pointLight.position, 'x').min(-5).max(5).step(0.001).name('Point Light X');
+pointLightFolder.add(pointLight.position, 'y').min(-5).max(5).step(0.001).name('Point Light Y');
+pointLightFolder.add(pointLight.position, 'z').min(-5).max(5).step(0.001).name('Point Light Z');
+
+const rectAreaLight = new THREE.RectAreaLight();
+rectAreaLight.color = new THREE.Color(0x4e00ff);
+rectAreaLight.intensity = 6;
+rectAreaLight.width = 1;
+rectAreaLight.height = 1;
+rectAreaLight.position.set(-1.5, 0, 1.5);
+rectAreaLight.lookAt(new THREE.Vector3(0, 0, 0));
+scene.add(rectAreaLight);
+
+const rectAreaLightFolder = gui.addFolder('Rect Area Light');
+rectAreaLightFolder.addColor(rectAreaLight, 'color').name('Color');
+rectAreaLightFolder.add(rectAreaLight, 'intensity').min(0).max(10).step(0.001).name('Intensity');
+rectAreaLightFolder.add(rectAreaLight, 'width').min(0).max(20).step(0.001).name('Width');
+rectAreaLightFolder.add(rectAreaLight, 'height').min(0).max(20).step(0.001).name('Height');
+rectAreaLightFolder.add(rectAreaLight.position, 'x').min(-5).max(5).step(0.001).name('X');
+rectAreaLightFolder.add(rectAreaLight.position, 'y').min(-5).max(5).step(0.001).name('Y');
+rectAreaLightFolder.add(rectAreaLight.position, 'z').min(-5).max(5).step(0.001).name('Z');
+
+const spotLight = new THREE.SpotLight();
+spotLight.color = new THREE.Color(0x78ff00);
+spotLight.intensity = 0.5;
+spotLight.distance = 10;
+spotLight.angle = Math.PI * 0.1;
+spotLight.penumbra = 0.25;
+spotLight.decay = 1;
+spotLight.position.set(0, 2, 3);
+scene.add(spotLight);
+
+const spotLightFolder = gui.addFolder('Spot Light');
+spotLightFolder.addColor(spotLight, 'color').name('Color');
+spotLightFolder.add(spotLight, 'intensity').min(0).max(10).step(0.001).name('Intensity');
+spotLightFolder.add(spotLight, 'distance').min(0).max(20).step(0.001).name('Distance');
+spotLightFolder.add(spotLight, 'angle').min(0).max(Math.PI * 2).step(0.001).name('Angle');
+spotLightFolder.add(spotLight, 'penumbra').min(0).max(1).step(0.001).name('Penumbra');
+spotLightFolder.add(spotLight, 'decay').min(0).max(5).step(0.001).name('Decay');
+spotLightFolder.add(spotLight.position, 'x').min(-5).max(5).step(0.001).name('X');
+spotLightFolder.add(spotLight.position, 'y').min(-5).max(5).step(0.001).name('Y');
+spotLightFolder.add(spotLight.position, 'z').min(-5).max(5).step(0.001).name('Z');
 /**
  * Objects
  */