sayudhalw/03-First-Three-JS-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sayudhalw
2026-08-25 19:56:05 +07:00
parent 0212ab224c
commit 297e1c83e6
2 changed files with 91 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pnpm-lock.yaml
Generated
+9 -9
View File
@@ -378,8 +378,8 @@ packages:
resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
engines: {node: '>=8.6'}
[email protected].7:
resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
[email protected].5:
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)
picomatch: 4.0.7
fdir: 6.5.0([email protected].5)
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)
picomatch: 4.0.7
fdir: 6.5.0([email protected].5)
picomatch: 4.0.5
postcss: 8.5.26
rollup: 4.62.5
tinyglobby: 0.2.17
src/script.js
+82 -5
View File
@@ -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);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;
const ambientLightFolder = gui.addFolder('Ambient Light');
ambientLightFolder.add(ambientLight, 'intensity').min(0).max(3).step(0.001).name('Ambient Light Intensity');
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
*/