From 01d3267942eab953979818bdb6bc4acef1fcfd0d Mon Sep 17 00:00:00 2001 From: sayudhalw Date: Wed, 26 Aug 2026 07:56:00 +0700 Subject: [PATCH] refactor: enhance lighting setup with additional light types and helpers --- src/script.js | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/src/script.js b/src/script.js index 0d41fe0..18d73f1 100644 --- a/src/script.js +++ b/src/script.js @@ -1,5 +1,6 @@ import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; +import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js'; import GUI from 'lil-gui'; /** @@ -22,32 +23,40 @@ ambientLight.color = new THREE.Color(0xffffff); ambientLight.intensity = 1; 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'); - +//------------------------------------------------------------------------------ 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'); +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.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'); +//Helper +const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2); +scene.add(directionalLightHelper); +//------------------------------------------------------------------------------ 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'); +const hemisphereLightFolder = gui.addFolder('Hemisphere Light').close(); 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'); +//Helper +const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2); +scene.add(hemisphereLightHelper); +//------------------------------------------------------------------------------ const pointLight = new THREE.PointLight(); pointLight.color = new THREE.Color(0xff9000); pointLight.distance = 10; @@ -56,7 +65,7 @@ pointLight.intensity = 1.5; pointLight.position.set(1, -0.5, 1); 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.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'); @@ -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, '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(); rectAreaLight.color = new THREE.Color(0x4e00ff); rectAreaLight.intensity = 6; @@ -74,7 +87,7 @@ 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'); +const rectAreaLightFolder = gui.addFolder('Rect Area Light').close(); 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'); @@ -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, 'z').min(-5).max(5).step(0.001).name('Z'); +//helper +const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight); +scene.add(rectAreaLightHelper); +//------------------------------------------------------------------------------ const spotLight = new THREE.SpotLight(); spotLight.color = new THREE.Color(0x78ff00); spotLight.intensity = 0.5; @@ -93,7 +110,7 @@ spotLight.decay = 1; spotLight.position.set(0, 2, 3); scene.add(spotLight); -const spotLightFolder = gui.addFolder('Spot Light'); +const spotLightFolder = gui.addFolder('Spot Light').close(); 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'); @@ -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, 'y').min(-5).max(5).step(0.001).name('Y'); 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 */