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

refactor: enhance lighting setup with additional light types and helpers

Browse Source
This commit is contained in:
sayudhalw
2026-08-26 07:56:00 +07:00
parent 297e1c83e6
commit 01d3267942
1 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/script.js
+33 -7
View File
@@ -1,5 +1,6 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';
import GUI from 'lil-gui'; import GUI from 'lil-gui';
/** /**
@@ -22,32 +23,40 @@ ambientLight.color = new THREE.Color(0xffffff);
ambientLight.intensity = 1; ambientLight.intensity = 1;
scene.add(ambientLight); scene.add(ambientLight);
const ambientLightFolder = gui.addFolder('Ambient Light'); const ambientLightFolder = gui.addFolder('Ambient Light').close();
ambientLightFolder.add(ambientLight, 'intensity').min(0).max(3).step(0.001).name('Ambient Light Intensity'); ambientLightFolder.add(ambientLight, 'intensity').min(0).max(3).step(0.001).name('Ambient Light Intensity');
//------------------------------------------------------------------------------
const directionalLight = new THREE.DirectionalLight(); const directionalLight = new THREE.DirectionalLight();
directionalLight.color = new THREE.Color(0x00fffc); directionalLight.color = new THREE.Color(0x00fffc);
directionalLight.intensity = 0.9; directionalLight.intensity = 0.9;
directionalLight.position.set(1, .25, 0); directionalLight.position.set(1, .25, 0);
scene.add(directionalLight); scene.add(directionalLight);
const directionalLightFolder = gui.addFolder('Directional Light'); const directionalLightFolder = gui.addFolder('Directional Light').close();
directionalLightFolder.add(directionalLight, 'intensity').min(0).max(3).step(0.001).name('Directional Light Intensity'); 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, '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, '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'); directionalLightFolder.add(directionalLight.position, 'z').min(-5).max(5).step(0.001).name('Directional Light Z');
//Helper
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2);
scene.add(directionalLightHelper);
//------------------------------------------------------------------------------
const hemisphereLight = new THREE.HemisphereLight(); const hemisphereLight = new THREE.HemisphereLight();
hemisphereLight.color = new THREE.Color(0xff0000); hemisphereLight.color = new THREE.Color(0xff0000);
hemisphereLight.groundColor = new THREE.Color(0x0000ff); hemisphereLight.groundColor = new THREE.Color(0x0000ff);
hemisphereLight.intensity = 0.9; hemisphereLight.intensity = 0.9;
scene.add(hemisphereLight); scene.add(hemisphereLight);
const hemisphereLightFolder = gui.addFolder('Hemisphere Light'); const hemisphereLightFolder = gui.addFolder('Hemisphere Light').close();
hemisphereLightFolder.add(hemisphereLight, 'intensity').min(0).max(3).step(0.001).name('Hemisphere Light Intensity'); 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, 'color').name('Hemisphere Light Color');
hemisphereLightFolder.addColor(hemisphereLight, 'groundColor').name('Hemisphere Light Ground Color'); hemisphereLightFolder.addColor(hemisphereLight, 'groundColor').name('Hemisphere Light Ground Color');
//Helper
const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2);
scene.add(hemisphereLightHelper);
//------------------------------------------------------------------------------
const pointLight = new THREE.PointLight(); const pointLight = new THREE.PointLight();
pointLight.color = new THREE.Color(0xff9000); pointLight.color = new THREE.Color(0xff9000);
pointLight.distance = 10; pointLight.distance = 10;
@@ -56,7 +65,7 @@ pointLight.intensity = 1.5;
pointLight.position.set(1, -0.5, 1); pointLight.position.set(1, -0.5, 1);
scene.add(pointLight); scene.add(pointLight);
const pointLightFolder = gui.addFolder('Point Light'); const pointLightFolder = gui.addFolder('Point Light').close();
pointLightFolder.addColor(pointLight, 'color').name('Point Light Color'); 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, '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, 'decay').min(0).max(5).step(0.001).name('Point Light Decay');
@@ -65,6 +74,10 @@ pointLightFolder.add(pointLight.position, 'x').min(-5).max(5).step(0.001).name('
pointLightFolder.add(pointLight.position, 'y').min(-5).max(5).step(0.001).name('Point Light Y'); 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'); pointLightFolder.add(pointLight.position, 'z').min(-5).max(5).step(0.001).name('Point Light Z');
//helper
const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2);
scene.add(pointLightHelper);
//------------------------------------------------------------------------------
const rectAreaLight = new THREE.RectAreaLight(); const rectAreaLight = new THREE.RectAreaLight();
rectAreaLight.color = new THREE.Color(0x4e00ff); rectAreaLight.color = new THREE.Color(0x4e00ff);
rectAreaLight.intensity = 6; rectAreaLight.intensity = 6;
@@ -74,7 +87,7 @@ rectAreaLight.position.set(-1.5, 0, 1.5);
rectAreaLight.lookAt(new THREE.Vector3(0, 0, 0)); rectAreaLight.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(rectAreaLight); scene.add(rectAreaLight);
const rectAreaLightFolder = gui.addFolder('Rect Area Light'); const rectAreaLightFolder = gui.addFolder('Rect Area Light').close();
rectAreaLightFolder.addColor(rectAreaLight, 'color').name('Color'); rectAreaLightFolder.addColor(rectAreaLight, 'color').name('Color');
rectAreaLightFolder.add(rectAreaLight, 'intensity').min(0).max(10).step(0.001).name('Intensity'); 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, 'width').min(0).max(20).step(0.001).name('Width');
@@ -83,6 +96,10 @@ rectAreaLightFolder.add(rectAreaLight.position, 'x').min(-5).max(5).step(0.001).
rectAreaLightFolder.add(rectAreaLight.position, 'y').min(-5).max(5).step(0.001).name('Y'); 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'); rectAreaLightFolder.add(rectAreaLight.position, 'z').min(-5).max(5).step(0.001).name('Z');
//helper
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight);
scene.add(rectAreaLightHelper);
//------------------------------------------------------------------------------
const spotLight = new THREE.SpotLight(); const spotLight = new THREE.SpotLight();
spotLight.color = new THREE.Color(0x78ff00); spotLight.color = new THREE.Color(0x78ff00);
spotLight.intensity = 0.5; spotLight.intensity = 0.5;
@@ -93,7 +110,7 @@ spotLight.decay = 1;
spotLight.position.set(0, 2, 3); spotLight.position.set(0, 2, 3);
scene.add(spotLight); scene.add(spotLight);
const spotLightFolder = gui.addFolder('Spot Light'); const spotLightFolder = gui.addFolder('Spot Light').close();
spotLightFolder.addColor(spotLight, 'color').name('Color'); spotLightFolder.addColor(spotLight, 'color').name('Color');
spotLightFolder.add(spotLight, 'intensity').min(0).max(10).step(0.001).name('Intensity'); 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, 'distance').min(0).max(20).step(0.001).name('Distance');
@@ -103,6 +120,15 @@ 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, '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, 'y').min(-5).max(5).step(0.001).name('Y');
spotLightFolder.add(spotLight.position, 'z').min(-5).max(5).step(0.001).name('Z'); spotLightFolder.add(spotLight.position, 'z').min(-5).max(5).step(0.001).name('Z');
//helper
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);
window.requestAnimationFrame(() =>
{
spotLightHelper.update();
});
//------------------------------------------------------------------------------
/** /**
* Objects * Objects
*/ */