[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M73C047GKSA6TQQ41PBYYY23":3,"skill-same:01M73C047GKSA6TQQ41PBYYY23":46},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":14,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":29,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M73C047GKSA6TQQ41PBYYY23","threejs-lighting",null,"Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.","kalash33\u002Fkstack","kalash33","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F90259149?v=4","01M7365X8Q0B73NYHA730SMZWN","Kalash Poddar","01M7365X9D0JK47C3Q0YCCK9Z2",0,"MIT","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fthreejs-lighting\u002FSKILL.md",[],[],"2026-11-11 15:11:14",false,"---\nname: threejs-lighting\ndescription: Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.\n---\n\n# Three.js Lighting\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F Basic lighting setup\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambientLight);\n\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 1);\ndirectionalLight.position.set(5, 5, 5);\nscene.add(directionalLight);\n```\n\n## Light Types Overview\n\n| Light            | Description            | Shadow Support | Cost     |\n| ---------------- | ---------------------- | -------------- | -------- |\n| AmbientLight     | Uniform everywhere     | No             | Very Low |\n| HemisphereLight  | Sky\u002Fground gradient    | No             | Very Low |\n| DirectionalLight | Parallel rays (sun)    | Yes            | Low      |\n| PointLight       | Omnidirectional (bulb) | Yes            | Medium   |\n| SpotLight        | Cone-shaped            | Yes            | Medium   |\n| RectAreaLight    | Area light (window)    | No\\*           | High     |\n\n\\*RectAreaLight shadows require custom solutions\n\n## AmbientLight\n\nIlluminates all objects equally. No direction, no shadows.\n\n```javascript\n\u002F\u002F AmbientLight(color, intensity)\nconst ambient = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambient);\n\n\u002F\u002F Modify at runtime\nambient.color.set(0xffffcc);\nambient.intensity = 0.3;\n```\n\n## HemisphereLight\n\nGradient from sky to ground color. Good for outdoor scenes.\n\n```javascript\n\u002F\u002F HemisphereLight(skyColor, groundColor, intensity)\nconst hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6);\nhemi.position.set(0, 50, 0);\nscene.add(hemi);\n\n\u002F\u002F Properties\nhemi.color; \u002F\u002F Sky color\nhemi.groundColor; \u002F\u002F Ground color\nhemi.intensity;\n```\n\n## DirectionalLight\n\nParallel light rays. Simulates distant light source (sun).\n\n```javascript\n\u002F\u002F DirectionalLight(color, intensity)\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1);\ndirLight.position.set(5, 10, 5);\n\n\u002F\u002F Light points at target (default: 0, 0, 0)\ndirLight.target.position.set(0, 0, 0);\nscene.add(dirLight.target);\n\nscene.add(dirLight);\n```\n\n### DirectionalLight Shadows\n\n```javascript\ndirLight.castShadow = true;\n\n\u002F\u002F Shadow map size (higher = sharper, more expensive)\ndirLight.shadow.mapSize.width = 2048;\ndirLight.shadow.mapSize.height = 2048;\n\n\u002F\u002F Shadow camera (orthographic)\ndirLight.shadow.camera.near = 0.5;\ndirLight.shadow.camera.far = 50;\ndirLight.shadow.camera.left = -10;\ndirLight.shadow.camera.right = 10;\ndirLight.shadow.camera.top = 10;\ndirLight.shadow.camera.bottom = -10;\n\n\u002F\u002F Shadow softness\ndirLight.shadow.radius = 4; \u002F\u002F Blur radius (PCFSoftShadowMap only)\n\n\u002F\u002F Shadow bias (fixes shadow acne)\ndirLight.shadow.bias = -0.0001;\ndirLight.shadow.normalBias = 0.02;\n\n\u002F\u002F Helper to visualize shadow camera\nconst helper = new THREE.CameraHelper(dirLight.shadow.camera);\nscene.add(helper);\n```\n\n## PointLight\n\nEmits light in all directions from a point. Like a light bulb.\n\n```javascript\n\u002F\u002F PointLight(color, intensity, distance, decay)\nconst pointLight = new THREE.PointLight(0xffffff, 1, 100, 2);\npointLight.position.set(0, 5, 0);\nscene.add(pointLight);\n\n\u002F\u002F Properties\npointLight.distance; \u002F\u002F Maximum range (0 = infinite)\npointLight.decay; \u002F\u002F Light falloff (physically correct = 2)\n```\n\n### PointLight Shadows\n\n```javascript\npointLight.castShadow = true;\npointLight.shadow.mapSize.width = 1024;\npointLight.shadow.mapSize.height = 1024;\n\n\u002F\u002F Shadow camera (perspective - 6 directions for cube map)\npointLight.shadow.camera.near = 0.5;\npointLight.shadow.camera.far = 50;\n\npointLight.shadow.bias = -0.005;\n```\n\n## SpotLight\n\nCone-shaped light. Like a flashlight or stage light.\n\n```javascript\n\u002F\u002F SpotLight(color, intensity, distance, angle, penumbra, decay)\nconst spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI \u002F 6, 0.5, 2);\nspotLight.position.set(0, 10, 0);\n\n\u002F\u002F Target (light points at this)\nspotLight.target.position.set(0, 0, 0);\nscene.add(spotLight.target);\n\nscene.add(spotLight);\n\n\u002F\u002F Properties\nspotLight.angle; \u002F\u002F Cone angle (radians, max Math.PI\u002F2)\nspotLight.penumbra; \u002F\u002F Soft edge (0-1)\nspotLight.distance; \u002F\u002F Range\nspotLight.decay; \u002F\u002F Falloff\n```\n\n### SpotLight Shadows\n\n```javascript\nspotLight.castShadow = true;\nspotLight.shadow.mapSize.width = 1024;\nspotLight.shadow.mapSize.height = 1024;\n\n\u002F\u002F Shadow camera (perspective)\nspotLight.shadow.camera.near = 0.5;\nspotLight.shadow.camera.far = 50;\nspotLight.shadow.camera.fov = 30;\n\nspotLight.shadow.bias = -0.0001;\n\n\u002F\u002F Focus (affects shadow projection)\nspotLight.shadow.focus = 1;\n```\n\n## RectAreaLight\n\nRectangular area light. Great for soft, realistic lighting.\n\n```javascript\nimport { RectAreaLightHelper } from \"three\u002Fexamples\u002Fjsm\u002Fhelpers\u002FRectAreaLightHelper.js\";\nimport { RectAreaLightUniformsLib } from \"three\u002Fexamples\u002Fjsm\u002Flights\u002FRectAreaLightUniformsLib.js\";\n\n\u002F\u002F Must initialize uniforms first\nRectAreaLightUniformsLib.init();\n\n\u002F\u002F RectAreaLight(color, intensity, width, height)\nconst rectLight = new THREE.RectAreaLight(0xffffff, 5, 4, 2);\nrectLight.position.set(0, 5, 0);\nrectLight.lookAt(0, 0, 0);\nscene.add(rectLight);\n\n\u002F\u002F Helper\nconst helper = new RectAreaLightHelper(rectLight);\nrectLight.add(helper);\n\n\u002F\u002F Note: Only works with MeshStandardMaterial and MeshPhysicalMaterial\n\u002F\u002F Does not cast shadows natively\n```\n\n## Shadow Setup\n\n### Enable Shadows\n\n```javascript\n\u002F\u002F 1. Enable on renderer\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n\u002F\u002F Shadow map types:\n\u002F\u002F THREE.BasicShadowMap - fastest, low quality\n\u002F\u002F THREE.PCFShadowMap - default, filtered\n\u002F\u002F THREE.PCFSoftShadowMap - softer edges\n\u002F\u002F THREE.VSMShadowMap - variance shadow map\n\n\u002F\u002F 2. Enable on light\nlight.castShadow = true;\n\n\u002F\u002F 3. Enable on objects\nmesh.castShadow = true;\nmesh.receiveShadow = true;\n\n\u002F\u002F Ground plane\nfloor.receiveShadow = true;\nfloor.castShadow = false; \u002F\u002F Usually false for floors\n```\n\n### Optimizing Shadows\n\n```javascript\n\u002F\u002F Tight shadow camera frustum\nconst d = 10;\ndirLight.shadow.camera.left = -d;\ndirLight.shadow.camera.right = d;\ndirLight.shadow.camera.top = d;\ndirLight.shadow.camera.bottom = -d;\ndirLight.shadow.camera.near = 0.5;\ndirLight.shadow.camera.far = 30;\n\n\u002F\u002F Fix shadow acne\ndirLight.shadow.bias = -0.0001; \u002F\u002F Depth bias\ndirLight.shadow.normalBias = 0.02; \u002F\u002F Bias along normal\n\n\u002F\u002F Shadow map size (balance quality vs performance)\n\u002F\u002F 512 - low quality\n\u002F\u002F 1024 - medium quality\n\u002F\u002F 2048 - high quality\n\u002F\u002F 4096 - very high quality (expensive)\n```\n\n### Contact Shadows (Fake, Fast)\n\n```javascript\nimport { ContactShadows } from \"three\u002Fexamples\u002Fjsm\u002Fobjects\u002FContactShadows.js\";\n\nconst contactShadows = new ContactShadows({\n  resolution: 512,\n  blur: 2,\n  opacity: 0.5,\n  scale: 10,\n  position: [0, 0, 0],\n});\nscene.add(contactShadows);\n```\n\n## Light Helpers\n\n```javascript\nimport { RectAreaLightHelper } from \"three\u002Fexamples\u002Fjsm\u002Fhelpers\u002FRectAreaLightHelper.js\";\n\n\u002F\u002F DirectionalLight helper\nconst dirHelper = new THREE.DirectionalLightHelper(dirLight, 5);\nscene.add(dirHelper);\n\n\u002F\u002F PointLight helper\nconst pointHelper = new THREE.PointLightHelper(pointLight, 1);\nscene.add(pointHelper);\n\n\u002F\u002F SpotLight helper\nconst spotHelper = new THREE.SpotLightHelper(spotLight);\nscene.add(spotHelper);\n\n\u002F\u002F Hemisphere helper\nconst hemiHelper = new THREE.HemisphereLightHelper(hemiLight, 5);\nscene.add(hemiHelper);\n\n\u002F\u002F RectAreaLight helper\nconst rectHelper = new RectAreaLightHelper(rectLight);\nrectLight.add(rectHelper);\n\n\u002F\u002F Update helpers when light changes\ndirHelper.update();\nspotHelper.update();\n```\n\n## Environment Lighting (IBL)\n\nImage-Based Lighting using HDR environment maps.\n\n```javascript\nimport { RGBELoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FRGBELoader.js\";\n\nconst rgbeLoader = new RGBELoader();\nrgbeLoader.load(\"environment.hdr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n\n  \u002F\u002F Set as scene environment (affects all PBR materials)\n  scene.environment = texture;\n\n  \u002F\u002F Optional: also use as background\n  scene.background = texture;\n  scene.backgroundBlurriness = 0; \u002F\u002F 0-1, blur the background\n  scene.backgroundIntensity = 1;\n});\n\n\u002F\u002F PMREMGenerator for better reflections\nconst pmremGenerator = new THREE.PMREMGenerator(renderer);\npmremGenerator.compileEquirectangularShader();\n\nrgbeLoader.load(\"environment.hdr\", (texture) => {\n  const envMap = pmremGenerator.fromEquirectangular(texture).texture;\n  scene.environment = envMap;\n  texture.dispose();\n  pmremGenerator.dispose();\n});\n```\n\n### Cube Texture Environment\n\n```javascript\nconst cubeLoader = new THREE.CubeTextureLoader();\nconst envMap = cubeLoader.load([\n  \"px.jpg\",\n  \"nx.jpg\",\n  \"py.jpg\",\n  \"ny.jpg\",\n  \"pz.jpg\",\n  \"nz.jpg\",\n]);\n\nscene.environment = envMap;\nscene.background = envMap;\n```\n\n## Light Probes (Advanced)\n\nCapture lighting from a point in space for ambient lighting.\n\n```javascript\nimport { LightProbeGenerator } from \"three\u002Fexamples\u002Fjsm\u002Flights\u002FLightProbeGenerator.js\";\n\n\u002F\u002F Generate from cube texture\nconst lightProbe = new THREE.LightProbe();\nscene.add(lightProbe);\n\nlightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));\n\n\u002F\u002F Or from render target\nconst cubeCamera = new THREE.CubeCamera(\n  0.1,\n  100,\n  new THREE.WebGLCubeRenderTarget(256),\n);\ncubeCamera.update(renderer, scene);\nlightProbe.copy(\n  LightProbeGenerator.fromCubeRenderTarget(renderer, cubeCamera.renderTarget),\n);\n```\n\n## Common Lighting Setups\n\n### Three-Point Lighting\n\n```javascript\n\u002F\u002F Key light (main light)\nconst keyLight = new THREE.DirectionalLight(0xffffff, 1);\nkeyLight.position.set(5, 5, 5);\nscene.add(keyLight);\n\n\u002F\u002F Fill light (softer, opposite side)\nconst fillLight = new THREE.DirectionalLight(0xffffff, 0.5);\nfillLight.position.set(-5, 3, 5);\nscene.add(fillLight);\n\n\u002F\u002F Back light (rim lighting)\nconst backLight = new THREE.DirectionalLight(0xffffff, 0.3);\nbackLight.position.set(0, 5, -5);\nscene.add(backLight);\n\n\u002F\u002F Ambient fill\nconst ambient = new THREE.AmbientLight(0x404040, 0.3);\nscene.add(ambient);\n```\n\n### Outdoor Daylight\n\n```javascript\n\u002F\u002F Sun\nconst sun = new THREE.DirectionalLight(0xffffcc, 1.5);\nsun.position.set(50, 100, 50);\nsun.castShadow = true;\nscene.add(sun);\n\n\u002F\u002F Sky ambient\nconst hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6);\nscene.add(hemi);\n```\n\n### Indoor Studio\n\n```javascript\n\u002F\u002F Multiple area lights\nRectAreaLightUniformsLib.init();\n\nconst light1 = new THREE.RectAreaLight(0xffffff, 5, 2, 2);\nlight1.position.set(3, 3, 3);\nlight1.lookAt(0, 0, 0);\nscene.add(light1);\n\nconst light2 = new THREE.RectAreaLight(0xffffff, 3, 2, 2);\nlight2.position.set(-3, 3, 3);\nlight2.lookAt(0, 0, 0);\nscene.add(light2);\n\n\u002F\u002F Ambient fill\nconst ambient = new THREE.AmbientLight(0x404040, 0.2);\nscene.add(ambient);\n```\n\n## Light Animation\n\n```javascript\nconst clock = new THREE.Clock();\n\nfunction animate() {\n  const time = clock.getElapsedTime();\n\n  \u002F\u002F Orbit light around scene\n  light.position.x = Math.cos(time) * 5;\n  light.position.z = Math.sin(time) * 5;\n\n  \u002F\u002F Pulsing intensity\n  light.intensity = 1 + Math.sin(time * 2) * 0.5;\n\n  \u002F\u002F Color cycling\n  light.color.setHSL((time * 0.1) % 1, 1, 0.5);\n\n  \u002F\u002F Update helpers if using\n  lightHelper.update();\n}\n```\n\n## Performance Tips\n\n1. **Limit light count**: Each light adds shader complexity\n2. **Use baked lighting**: For static scenes, bake to textures\n3. **Smaller shadow maps**: 512-1024 often sufficient\n4. **Tight shadow frustums**: Only cover needed area\n5. **Disable unused shadows**: Not all lights need shadows\n6. **Use light layers**: Exclude objects from certain lights\n\n```javascript\n\u002F\u002F Light layers\nlight.layers.set(1); \u002F\u002F Light only affects layer 1\nmesh.layers.enable(1); \u002F\u002F Mesh is on layer 1\notherMesh.layers.disable(1); \u002F\u002F Other mesh not affected\n\n\u002F\u002F Selective shadows\nmesh.castShadow = true;\nmesh.receiveShadow = true;\ndecorMesh.castShadow = false; \u002F\u002F Small objects often don't need to cast\n```\n\n## See Also\n\n- `threejs-materials` - Material light response\n- `threejs-textures` - Lightmaps and environment maps\n- `threejs-postprocessing` - Bloom and other light effects\n","# Three.js Lighting\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F Basic lighting setup\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambientLight);\n\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 1);\ndirectionalLight.position.set(5, 5, 5);\nscene.add(directionalLight);\n```\n\n## Light Types Overview\n\n| Light            | Description            | Shadow Support | Cost     |\n| ---------------- | ---------------------- | -------------- | -------- |\n| AmbientLight     | Uniform everywhere     | No             | Very Low |\n| HemisphereLight  | Sky\u002Fground gradient    | No             | Very Low |\n| DirectionalLight | Parallel rays (sun)    | Yes            | Low      |\n| PointLight       | Omnidirectional (bulb) | Yes            | Medium   |\n| SpotLight        | Cone-shaped            | Yes            | Medium   |\n| RectAreaLight    | Area light (window)    | No\\*           | High     |\n\n\\*RectAreaLight shadows require custom solutions\n\n## AmbientLight\n\nIlluminates all objects equally. No direction, no shadows.\n\n```javascript\n\u002F\u002F AmbientLight(color, intensity)\nconst ambient = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambient);\n\n\u002F\u002F Modify at runtime\nambient.color.set(0xffffcc);\nambient.intensity = 0.3;\n```\n\n## HemisphereLight\n\nGradient from sky to ground color. Good for outdoor scenes.\n\n```javascript\n\u002F\u002F HemisphereLight(skyColor, groundColor, intensity)\nconst hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6);\nhemi.position.set(0, 50, 0);\nscene.add(hemi);\n\n\u002F\u002F Properties\nhemi.color; \u002F\u002F Sky color\nhemi.groundColor; \u002F\u002F Ground color\nhemi.intensity;\n```\n\n## DirectionalLight\n\nParallel light rays. Simulates distant light source (sun).\n\n```javascript\n\u002F\u002F DirectionalLight(color, intensity)\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1);\ndirLight.position.set(5, 10, 5);\n\n\u002F\u002F Light points at target (default: 0, 0, 0)\ndirLight.target.position.set(0, 0, 0);\nscene.add(dirLight.target);\n\nscene.add(dirLight);\n```\n\n### DirectionalLight Shadows\n\n```javascript\ndirLight.castShadow = true;\n\n\u002F\u002F Shadow map size (higher = sharper, more expensive)\ndirLight.shadow.mapSize.width = 2048;\ndirLight.shadow.mapSize.height = 2048;\n\n\u002F\u002F Shadow camera (orthographic)\ndirLight.shadow.camera.near = 0.5;\ndirLight.shadow.camera.far = 50;\ndirLight.shadow.camera.left = -10;\ndirLight.shadow.camera.right = 10;\ndirLight.shadow.camera.top = 10;\ndirLight.shadow.camera.bottom = -10;\n\n\u002F\u002F Shadow softness\ndirLight.shadow.radius = 4; \u002F\u002F Blur radius (PCFSoftShadowMap only)\n\n\u002F\u002F Shadow bias (fixes shadow acne)\ndirLight.shadow.bias = -0.0001;\ndirLight.shadow.normalBias = 0.02;\n\n\u002F\u002F Helper to visualize shadow camera\nconst helper = new THREE.CameraHelper(dirLight.shadow.camera);\nscene.add(helper);\n```\n\n## PointLight\n\nEmits light in all directions from a point. Like a light bulb.\n\n```javascript\n\u002F\u002F PointLight(color, intensity, distance, decay)\nconst pointLight = new THREE.PointLight(0xffffff, 1, 100, 2);\npointLight.position.set(0, 5, 0);\nscene.add(pointLight);\n\n\u002F\u002F Properties\npointLight.distance; \u002F\u002F Maximum range (0 = infinite)\npointLight.decay; \u002F\u002F Light falloff (physically correct = 2)\n```\n\n### PointLight Shadows\n\n```javascript\npointLight.castShadow = true;\npointLight.shadow.mapSize.width = 1024;\npointLight.shadow.mapSize.height = 1024;\n\n\u002F\u002F Shadow camera (perspective - 6 directions for cube map)\npointLight.shadow.camera.near = 0.5;\npointLight.shadow.camera.far = 50;\n\npointLight.shadow.bias = -0.005;\n```\n\n## SpotLight\n\nCone-shaped light. Like a flashlight or stage light.\n\n```javascript\n\u002F\u002F SpotLight(color, intensity, distance, angle, penumbra, decay)\nconst spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI \u002F 6, 0.5, 2);\nspotLight.position.set(0, 10, 0);\n\n\u002F\u002F Target (light points at this)\nspotLight.target.position.set(0, 0, 0);\nscene.add(spotLight.target);\n\nscene.add(spotLight);\n\n\u002F\u002F Properties\nspotLight.angle; \u002F\u002F Cone angle (radians, max Math.PI\u002F2)\nspotLight.penumbra; \u002F\u002F Soft edge (0-1)\nspotLight.distance; \u002F\u002F Range\nspotLight.decay; \u002F\u002F Falloff\n```\n\n### SpotLight Shadows\n\n```javascript\nspotLight.castShadow = true;\nspotLight.shadow.mapSize.width = 1024;\nspotLight.shadow.mapSize.height = 1024;\n\n\u002F\u002F Shadow camera (perspective)\nspotLight.shadow.camera.near = 0.5;\nspotLight.shadow.camera.far = 50;\nspotLight.shadow.camera.fov = 30;\n\nspotLight.shadow.bias = -0.0001;\n\n\u002F\u002F Focus (affects shadow projection)\nspotLight.shadow.focus = 1;\n```\n\n## RectAreaLight\n\nRectangular area light. Great for soft, realistic lighting.\n\n```javascript\nimport { RectAreaLightHelper } from \"three\u002Fexamples\u002Fjsm\u002Fhelpers\u002FRectAreaLightHelper.js\";\nimport { RectAreaLightUniformsLib } from \"three\u002Fexamples\u002Fjsm\u002Flights\u002FRectAreaLightUniformsLib.js\";\n\n\u002F\u002F Must initialize uniforms first\nRectAreaLightUniformsLib.init();\n\n\u002F\u002F RectAreaLight(color, intensity, width, height)\nconst rectLight = new THREE.RectAreaLight(0xffffff, 5, 4, 2);\nrectLight.position.set(0, 5, 0);\nrectLight.lookAt(0, 0, 0);\nscene.add(rectLight);\n\n\u002F\u002F Helper\nconst helper = new RectAreaLightHelper(rectLight);\nrectLight.add(helper);\n\n\u002F\u002F Note: Only works with MeshStandardMaterial and MeshPhysicalMaterial\n\u002F\u002F Does not cast shadows natively\n```\n\n## Shadow Setup\n\n### Enable Shadows\n\n```javascript\n\u002F\u002F 1. Enable on renderer\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n\u002F\u002F Shadow map types:\n\u002F\u002F THREE.BasicShadowMap - fastest, low quality\n\u002F\u002F THREE.PCFShadowMap - default, filtered\n\u002F\u002F THREE.PCFSoftShadowMap - softer edges\n\u002F\u002F THREE.VSMShadowMap - variance shadow map\n\n\u002F\u002F 2. Enable on light\nlight.castShadow = true;\n\n\u002F\u002F 3. Enable on objects\nmesh.castShadow = true;\nmesh.receiveShadow = true;\n\n\u002F\u002F Ground plane\nfloor.receiveShadow = true;\nfloor.castShadow = false; \u002F\u002F Usually false for floors\n```\n\n### Optimizing Shadows\n\n```javascript\n\u002F\u002F Tight shadow camera frustum\nconst d = 10;\ndirLight.shadow.camera.left = -d;\ndirLight.shadow.camera.right = d;\ndirLight.shadow.camera.top = d;\ndirLight.shadow.camera.bottom = -d;\ndirLight.shadow.camera.near = 0.5;\ndirLight.shadow.camera.far = 30;\n\n\u002F\u002F Fix shadow acne\ndirLight.shadow.bias = -0.0001; \u002F\u002F Depth bias\ndirLight.shadow.normalBias = 0.02; \u002F\u002F Bias along normal\n\n\u002F\u002F Shadow map size (balance quality vs performance)\n\u002F\u002F 512 - low quality\n\u002F\u002F 1024 - medium quality\n\u002F\u002F 2048 - high quality\n\u002F\u002F 4096 - very high quality (expensive)\n```\n\n### Contact Shadows (Fake, Fast)\n\n```javascript\nimport { ContactShadows } from \"three\u002Fexamples\u002Fjsm\u002Fobjects\u002FContactShadows.js\";\n\nconst contactShadows = new ContactShadows({\n  resolution: 512,\n  blur: 2,\n  opacity: 0.5,\n  scale: 10,\n  position: [0, 0, 0],\n});\nscene.add(contactShadows);\n```\n\n## Light Helpers\n\n```javascript\nimport { RectAreaLightHelper } from \"three\u002Fexamples\u002Fjsm\u002Fhelpers\u002FRectAreaLightHelper.js\";\n\n\u002F\u002F DirectionalLight helper\nconst dirHelper = new THREE.DirectionalLightHelper(dirLight, 5);\nscene.add(dirHelper);\n\n\u002F\u002F PointLight helper\nconst pointHelper = new THREE.PointLightHelper(pointLight, 1);\nscene.add(pointHelper);\n\n\u002F\u002F SpotLight helper\nconst spotHelper = new THREE.SpotLightHelper(spotLight);\nscene.add(spotHelper);\n\n\u002F\u002F Hemisphere helper\nconst hemiHelper = new THREE.HemisphereLightHelper(hemiLight, 5);\nscene.add(hemiHelper);\n\n\u002F\u002F RectAreaLight helper\nconst rectHelper = new RectAreaLightHelper(rectLight);\nrectLight.add(rectHelper);\n\n\u002F\u002F Update helpers when light changes\ndirHelper.update();\nspotHelper.update();\n```\n\n## Environment Lighting (IBL)\n\nImage-Based Lighting using HDR environment maps.\n\n```javascript\nimport { RGBELoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FRGBELoader.js\";\n\nconst rgbeLoader = new RGBELoader();\nrgbeLoader.load(\"environment.hdr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n\n  \u002F\u002F Set as scene environment (affects all PBR materials)\n  scene.environment = texture;\n\n  \u002F\u002F Optional: also use as background\n  scene.background = texture;\n  scene.backgroundBlurriness = 0; \u002F\u002F 0-1, blur the background\n  scene.backgroundIntensity = 1;\n});\n\n\u002F\u002F PMREMGenerator for better reflections\nconst pmremGenerator = new THREE.PMREMGenerator(renderer);\npmremGenerator.compileEquirectangularShader();\n\nrgbeLoader.load(\"environment.hdr\", (texture) => {\n  const envMap = pmremGenerator.fromEquirectangular(texture).texture;\n  scene.environment = envMap;\n  texture.dispose();\n  pmremGenerator.dispose();\n});\n```\n\n### Cube Texture Environment\n\n```javascript\nconst cubeLoader = new THREE.CubeTextureLoader();\nconst envMap = cubeLoader.load([\n  \"px.jpg\",\n  \"nx.jpg\",\n  \"py.jpg\",\n  \"ny.jpg\",\n  \"pz.jpg\",\n  \"nz.jpg\",\n]);\n\nscene.environment = envMap;\nscene.background = envMap;\n```\n\n## Light Probes (Advanced)\n\nCapture lighting from a point in space for ambient lighting.\n\n```javascript\nimport { LightProbeGenerator } from \"three\u002Fexamples\u002Fjsm\u002Flights\u002FLightProbeGenerator.js\";\n\n\u002F\u002F Generate from cube texture\nconst lightProbe = new THREE.LightProbe();\nscene.add(lightProbe);\n\nlightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));\n\n\u002F\u002F Or from render target\nconst cubeCamera = new THREE.CubeCamera(\n  0.1,\n  100,\n  new THREE.WebGLCubeRenderTarget(256),\n);\ncubeCamera.update(renderer, scene);\nlightProbe.copy(\n  LightProbeGenerator.fromCubeRenderTarget(renderer, cubeCamera.renderTarget),\n);\n```\n\n## Common Lighting Setups\n\n### Three-Point Lighting\n\n```javascript\n\u002F\u002F Key light (main light)\nconst keyLight = new THREE.DirectionalLight(0xffffff, 1);\nkeyLight.position.set(5, 5, 5);\nscene.add(keyLight);\n\n\u002F\u002F Fill light (softer, opposite side)\nconst fillLight = new THREE.DirectionalLight(0xffffff, 0.5);\nfillLight.position.set(-5, 3, 5);\nscene.add(fillLight);\n\n\u002F\u002F Back light (rim lighting)\nconst backLight = new THREE.DirectionalLight(0xffffff, 0.3);\nbackLight.position.set(0, 5, -5);\nscene.add(backLight);\n\n\u002F\u002F Ambient fill\nconst ambient = new THREE.AmbientLight(0x404040, 0.3);\nscene.add(ambient);\n```\n\n### Outdoor Daylight\n\n```javascript\n\u002F\u002F Sun\nconst sun = new THREE.DirectionalLight(0xffffcc, 1.5);\nsun.position.set(50, 100, 50);\nsun.castShadow = true;\nscene.add(sun);\n\n\u002F\u002F Sky ambient\nconst hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6);\nscene.add(hemi);\n```\n\n### Indoor Studio\n\n```javascript\n\u002F\u002F Multiple area lights\nRectAreaLightUniformsLib.init();\n\nconst light1 = new THREE.RectAreaLight(0xffffff, 5, 2, 2);\nlight1.position.set(3, 3, 3);\nlight1.lookAt(0, 0, 0);\nscene.add(light1);\n\nconst light2 = new THREE.RectAreaLight(0xffffff, 3, 2, 2);\nlight2.position.set(-3, 3, 3);\nlight2.lookAt(0, 0, 0);\nscene.add(light2);\n\n\u002F\u002F Ambient fill\nconst ambient = new THREE.AmbientLight(0x404040, 0.2);\nscene.add(ambient);\n```\n\n## Light Animation\n\n```javascript\nconst clock = new THREE.Clock();\n\nfunction animate() {\n  const time = clock.getElapsedTime();\n\n  \u002F\u002F Orbit light around scene\n  light.position.x = Math.cos(time) * 5;\n  light.position.z = Math.sin(time) * 5;\n\n  \u002F\u002F Pulsing intensity\n  light.intensity = 1 + Math.sin(time * 2) * 0.5;\n\n  \u002F\u002F Color cycling\n  light.color.setHSL((time * 0.1) % 1, 1, 0.5);\n\n  \u002F\u002F Update helpers if using\n  lightHelper.update();\n}\n```\n\n## Performance Tips\n\n1. **Limit light count**: Each light adds shader complexity\n2. **Use baked lighting**: For static scenes, bake to textures\n3. **Smaller shadow maps**: 512-1024 often sufficient\n4. **Tight shadow frustums**: Only cover needed area\n5. **Disable unused shadows**: Not all lights need shadows\n6. **Use light layers**: Exclude objects from certain lights\n\n```javascript\n\u002F\u002F Light layers\nlight.layers.set(1); \u002F\u002F Light only affects layer 1\nmesh.layers.enable(1); \u002F\u002F Mesh is on layer 1\notherMesh.layers.disable(1); \u002F\u002F Other mesh not affected\n\n\u002F\u002F Selective shadows\nmesh.castShadow = true;\nmesh.receiveShadow = true;\ndecorMesh.castShadow = false; \u002F\u002F Small objects often don't need to cast\n```\n\n## See Also\n\n- `threejs-materials` - Material light response\n- `threejs-textures` - Lightmaps and environment maps\n- `threejs-postprocessing` - Bloom and other light effects\n",{"name":5,"description":7},"main","b30820b3248f6676d5389f0ccabd4e5250c9c536","skills\u002Fthreejs-lighting","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack","https:\u002F\u002Fgithub.com\u002Fkalash33","kalashpoddar.me","Tech-savvy Full Stack Developer 🚀 | Cybersecurity enthusiast 🔒 | Passionate about innovation and securing the digital world 🌐 | Let's code securely! 💻🔐","2026-05-20 04:11:22",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add kalash33\u002Fkstack --skill threejs-lighting",{"tool":38,"command":39},"bunx","bunx skills add kalash33\u002Fkstack --skill threejs-lighting",{"tool":41,"command":42},"pnpm","pnpm dlx skills add kalash33\u002Fkstack --skill threejs-lighting","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fthreejs-lighting\u002FSKILL.md",true,[],[47,54,61,68,75,82],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M73CFERCR43JCAP606E41EFB","zustand-store-ts","Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state\u002Faction separation. Use when building React state management, creating global stores, or implementing reacti...","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fzustand-store-ts\u002FSKILL.md",[],[],{"skillNo":55,"name":56,"nameZh":6,"description":57,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":19},"01M73CFCMFVTAQEMTZ5HR10X8V","zoom-automation","Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fzoom-automation\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":19},"01M73CFAA7EBWXJVXDQ1X555MB","zoho-crm-automation","Automate Zoho CRM tasks via Rube MCP (Composio): create\u002Fupdate records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fzoho-crm-automation\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":19},"01M73CF80XCM9K81567MJ8QZFW","zod-validation-expert","Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fzod-validation-expert\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":19},"01M73CF4YPMF3RA8ZJDXZSMD93","zeroize-audit","Detects missing zeroization of sensitive data in source code and identifies zeroization removed by compiler optimizations, with assembly-level analysis, and control-flow verification. Use for auditing C\u002FC++\u002FRust code handling secrets, keys, passwords, or other sensitive data.","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fzeroize-audit\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M73CF2S25EN3XNAMKY47XHPS","zendesk-automation","Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fkalash33\u002Fkstack\u002Fblob\u002Fmain\u002Fskills\u002Fzendesk-automation\u002FSKILL.md",[],[]]