diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 83e19f5..cf6fa10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -378,8 +378,8 @@ packages: resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==} engines: {node: '>=8.6'} - picomatch@4.0.7: - resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==} + picomatch@4.0.5: + resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==} engines: {node: '>=12'} postcss@8.5.26: @@ -644,9 +644,9 @@ snapshots: '@esbuild/win32-ia32': 0.25.12 '@esbuild/win32-x64': 0.25.12 - fdir@6.5.0(picomatch@4.0.7): + fdir@6.5.0(picomatch@4.0.5): optionalDependencies: - picomatch: 4.0.7 + picomatch: 4.0.5 fill-range@7.1.1: dependencies: @@ -670,7 +670,7 @@ snapshots: picomatch@2.3.2: {} - picomatch@4.0.7: {} + picomatch@4.0.5: {} postcss@8.5.26: dependencies: @@ -716,8 +716,8 @@ snapshots: tinyglobby@0.2.17: dependencies: - fdir: 6.5.0(picomatch@4.0.7) - picomatch: 4.0.7 + fdir: 6.5.0(picomatch@4.0.5) + picomatch: 4.0.5 to-regex-range@5.0.1: dependencies: @@ -731,8 +731,8 @@ snapshots: vite@6.4.3: dependencies: esbuild: 0.25.12 - fdir: 6.5.0(picomatch@4.0.7) - picomatch: 4.0.7 + fdir: 6.5.0(picomatch@4.0.5) + picomatch: 4.0.5 postcss: 8.5.26 rollup: 4.62.5 tinyglobby: 0.2.17 diff --git a/src/script.js b/src/script.js index 8333393..0d41fe0 100644 --- a/src/script.js +++ b/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); -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 */