{"id":"dff4566c-a116-47d0-aa95-4481ad9cb622","shortId":"sH9xxw","kind":"skill","title":"threejs-lighting","tagline":"Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.","description":"# Three.js Lighting\n\n## When to Use\n- You need to add or tune lighting in a Three.js scene.\n- The task involves light types, shadows, environment lighting, or lighting performance tradeoffs.\n- You want to improve scene readability, realism, or mood through Three.js lighting setup.\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n// 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/ground 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// AmbientLight(color, intensity)\nconst ambient = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambient);\n\n// 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// HemisphereLight(skyColor, groundColor, intensity)\nconst hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6);\nhemi.position.set(0, 50, 0);\nscene.add(hemi);\n\n// Properties\nhemi.color; // Sky color\nhemi.groundColor; // Ground color\nhemi.intensity;\n```\n\n## DirectionalLight\n\nParallel light rays. Simulates distant light source (sun).\n\n```javascript\n// DirectionalLight(color, intensity)\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1);\ndirLight.position.set(5, 10, 5);\n\n// 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// Shadow map size (higher = sharper, more expensive)\ndirLight.shadow.mapSize.width = 2048;\ndirLight.shadow.mapSize.height = 2048;\n\n// 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// Shadow softness\ndirLight.shadow.radius = 4; // Blur radius (PCFSoftShadowMap only)\n\n// Shadow bias (fixes shadow acne)\ndirLight.shadow.bias = -0.0001;\ndirLight.shadow.normalBias = 0.02;\n\n// 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// 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// Properties\npointLight.distance; // Maximum range (0 = infinite)\npointLight.decay; // 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// 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// SpotLight(color, intensity, distance, angle, penumbra, decay)\nconst spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 6, 0.5, 2);\nspotLight.position.set(0, 10, 0);\n\n// Target (light points at this)\nspotLight.target.position.set(0, 0, 0);\nscene.add(spotLight.target);\n\nscene.add(spotLight);\n\n// Properties\nspotLight.angle; // Cone angle (radians, max Math.PI/2)\nspotLight.penumbra; // Soft edge (0-1)\nspotLight.distance; // Range\nspotLight.decay; // Falloff\n```\n\n### SpotLight Shadows\n\n```javascript\nspotLight.castShadow = true;\nspotLight.shadow.mapSize.width = 1024;\nspotLight.shadow.mapSize.height = 1024;\n\n// 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// 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/examples/jsm/helpers/RectAreaLightHelper.js\";\nimport { RectAreaLightUniformsLib } from \"three/examples/jsm/lights/RectAreaLightUniformsLib.js\";\n\n// Must initialize uniforms first (WebGL renderer only)\nRectAreaLightUniformsLib.init();\n\n// 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// Helper\nconst helper = new RectAreaLightHelper(rectLight);\nrectLight.add(helper);\n\n// Works with MeshStandardMaterial, MeshPhysicalMaterial\n// r183: Clearcoat on MeshPhysicalMaterial is now properly lit by RectAreaLight\n// Does not cast shadows natively\n```\n\n## Shadow Setup\n\n### Enable Shadows\n\n```javascript\n// 1. Enable on renderer\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n// Shadow map types:\n// THREE.BasicShadowMap - fastest, low quality\n// THREE.PCFShadowMap - default, filtered\n// THREE.PCFSoftShadowMap - softer edges\n// THREE.VSMShadowMap - variance shadow map\n\n// 2. Enable on light\nlight.castShadow = true;\n\n// 3. Enable on objects\nmesh.castShadow = true;\nmesh.receiveShadow = true;\n\n// Ground plane\nfloor.receiveShadow = true;\nfloor.castShadow = false; // Usually false for floors\n```\n\n### Optimizing Shadows\n\n```javascript\n// 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// Fix shadow acne\ndirLight.shadow.bias = -0.0001; // Depth bias\ndirLight.shadow.normalBias = 0.02; // Bias along normal\n\n// Shadow map size (balance quality vs performance)\n// 512 - low quality\n// 1024 - medium quality\n// 2048 - high quality\n// 4096 - very high quality (expensive)\n```\n\n### Contact Shadows (Fake, Fast)\n\n```javascript\nimport { ContactShadows } from \"three/examples/jsm/objects/ContactShadows.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/examples/jsm/helpers/RectAreaLightHelper.js\";\n\n// DirectionalLight helper\nconst dirHelper = new THREE.DirectionalLightHelper(dirLight, 5);\nscene.add(dirHelper);\n\n// PointLight helper\nconst pointHelper = new THREE.PointLightHelper(pointLight, 1);\nscene.add(pointHelper);\n\n// SpotLight helper\nconst spotHelper = new THREE.SpotLightHelper(spotLight);\nscene.add(spotHelper);\n\n// Hemisphere helper\nconst hemiHelper = new THREE.HemisphereLightHelper(hemiLight, 5);\nscene.add(hemiHelper);\n\n// RectAreaLight helper\nconst rectHelper = new RectAreaLightHelper(rectLight);\nrectLight.add(rectHelper);\n\n// 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/examples/jsm/loaders/RGBELoader.js\";\n\nconst rgbeLoader = new RGBELoader();\nrgbeLoader.load(\"environment.hdr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n\n  // Set as scene environment (affects all PBR materials)\n  scene.environment = texture;\n\n  // Optional: also use as background\n  scene.background = texture;\n  scene.backgroundBlurriness = 0; // 0-1, blur the background\n  scene.backgroundIntensity = 1;\n});\n\n// 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/examples/jsm/lights/LightProbeGenerator.js\";\n\n// Generate from cube texture\nconst lightProbe = new THREE.LightProbe();\nscene.add(lightProbe);\n\nlightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));\n\n// 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// Key light (main light)\nconst keyLight = new THREE.DirectionalLight(0xffffff, 1);\nkeyLight.position.set(5, 5, 5);\nscene.add(keyLight);\n\n// Fill light (softer, opposite side)\nconst fillLight = new THREE.DirectionalLight(0xffffff, 0.5);\nfillLight.position.set(-5, 3, 5);\nscene.add(fillLight);\n\n// Back light (rim lighting)\nconst backLight = new THREE.DirectionalLight(0xffffff, 0.3);\nbackLight.position.set(0, 5, -5);\nscene.add(backLight);\n\n// Ambient fill\nconst ambient = new THREE.AmbientLight(0x404040, 0.3);\nscene.add(ambient);\n```\n\n### Outdoor Daylight\n\n```javascript\n// Sun\nconst sun = new THREE.DirectionalLight(0xffffcc, 1.5);\nsun.position.set(50, 100, 50);\nsun.castShadow = true;\nscene.add(sun);\n\n// Sky ambient\nconst hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6);\nscene.add(hemi);\n```\n\n### Indoor Studio\n\n```javascript\n// 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// 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  // Orbit light around scene\n  light.position.x = Math.cos(time) * 5;\n  light.position.z = Math.sin(time) * 5;\n\n  // Pulsing intensity\n  light.intensity = 1 + Math.sin(time * 2) * 0.5;\n\n  // Color cycling\n  light.color.setHSL((time * 0.1) % 1, 1, 0.5);\n\n  // 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// Light layers\nlight.layers.set(1); // Light only affects layer 1\nmesh.layers.enable(1); // Mesh is on layer 1\notherMesh.layers.disable(1); // Other mesh not affected\n\n// Selective shadows\nmesh.castShadow = true;\nmesh.receiveShadow = true;\ndecorMesh.castShadow = false; // 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\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["threejs","lighting","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-threejs-lighting","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-lighting","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (12,489 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:01.444Z","embedding":null,"createdAt":"2026-04-18T21:46:19.137Z","updatedAt":"2026-04-22T06:52:01.444Z","lastSeenAt":"2026-04-22T06:52:01.444Z","tsv":"'-0.0001':293,460,623 '-0.005':375 '-1':436,786 '-10':272,278 '-1024':1108 '-3':1016 '-5':922,940 '/2)':431 '0':196,198,237,238,239,241,242,243,336,338,345,407,409,416,417,418,435,507,509,511,512,513,674,675,676,784,785,938,1002,1003,1004,1020,1021,1022 '0.02':295,627 '0.1':874,1073 '0.2':1032 '0.3':171,936,950 '0.5':81,162,268,371,404,454,616,670,920,1068,1076 '0.6':194,979 '0x404040':949,1031 '0x87ceeb':192,977 '0x8b4513':193,978 '0xffffcc':169,961 '0xffffff':80,88,161,226,331,399,502,902,919,935,993,1011 '1':89,227,332,400,466,548,703,791,903,1064,1074,1075,1084,1141,1146,1148,1153,1155 '1.5':962 '10':230,274,276,408,606,672 '100':333,401,875,965 '1024':359,361,447,449,641 '2':334,352,405,505,573,668,995,996,1013,1014,1067,1093 '2048':261,263,644 '256':878 '3':579,923,998,999,1000,1012,1017,1018,1103 '30':458,618 '4':282,504,1111 '4096':647 '5':91,92,93,229,231,337,503,508,693,722,905,906,907,924,939,994,1055,1060,1119 '50':197,270,373,456,964,966 '512':638,666,1107 '6':365,403,1128 'acn':291,621 'ad':13 'add':32,1090 'advanc':837 'affect':462,770,1144,1159 'along':629 'also':777,1177 'ambient':158,164,846,943,946,952,972,1025,1028,1034 'ambient.color.set':168 'ambient.intensity':170 'ambientlight':77,83,104,144,154 'angl':392,426 'anim':1036,1043 'area':134,469,986,1118 'around':1049 'ask':1232 'back':927 'background':780,789 'backlight':932,942 'backlight.position.set':937 'bake':1095,1100 'balanc':634 'base':746 'basic':73 'better':794 'bias':288,625,628 'bloom':1194 'blur':283,667,787 'boundari':1240 'bulb':124,320 'camera':265,300,363,451,602 'captur':838 'cast':540,1175 'certain':1135 'chang':738 'clarif':1234 'clear':1207 'clearcoat':529 'clock':1039 'clock.getelapsedtime':1046 'color':155,178,204,207,220,323,389,494,1069 'common':886 'complex':1092 'cone':129,378,425 'cone-shap':128,377 'configur':15 'const':76,84,157,188,222,301,327,395,498,517,604,661,688,698,708,717,727,757,796,805,818,822,857,870,898,915,931,945,957,973,989,1007,1027,1038,1044 'contact':652 'contactshadow':658,662,664,678 'correct':351 'cost':103 'count':1087 'cover':1116 'criteria':1243 'cube':368,814,855 'cubecamera':871 'cubecamera.rendertarget':885 'cubecamera.update':879 'cubeload':819 'cubeloader.load':824 'cubetextur':865 'custom':142 'cycl':1070 'd':605,608,610,612,614 'daylight':954 'decay':326,394 'decormesh.castshadow':1166 'default':236,564 'depth':624 'describ':1211 'descript':100 'direct':150,313,366 'directionallight':85,95,116,209,219,248,686 'directionallight.position.set':90 'dirhelp':689,695 'dirhelper.update':739 'dirlight':223,247,692 'dirlight.castshadow':251 'dirlight.position.set':228 'dirlight.shadow.bias':292,622 'dirlight.shadow.camera':305 'dirlight.shadow.camera.bottom':277,613 'dirlight.shadow.camera.far':269,617 'dirlight.shadow.camera.left':271,607 'dirlight.shadow.camera.near':267,615 'dirlight.shadow.camera.right':273,609 'dirlight.shadow.camera.top':275,611 'dirlight.shadow.mapsize.height':262 'dirlight.shadow.mapsize.width':260 'dirlight.shadow.normalbias':294,626 'dirlight.shadow.radius':281 'dirlight.target':245 'dirlight.target.position.set':240 'disabl':1120 'distanc':325,391 'distant':214 'edg':434,568 'effect':1198 'emit':309 'enabl':545,549,574,580 'environ':9,46,741,750,769,816,1189,1223 'environment-specif':1222 'environment.hdr':762,803 'envmap':806,811,823,832,834 'equal':148 'everywher':106 'exclud':1132 'expens':259,651 'expert':1228 'fake':654 'falloff':349,440 'fals':592,594,1167 'fast':655 'fastest':560 'fill':910,944,1026 'filllight':916,926 'filllight.position.set':921 'filter':565 'first':488 'fix':289,619 'flashlight':383 'floor':596 'floor.castshadow':591 'floor.receiveshadow':589 'focus':461 'frustum':603,1114 'function':1042 'generat':853 'good':179 'gradient':112,173 'great':471 'ground':177,206,587 'groundcolor':186 'hdr':749 'height':497 'helper':296,302,307,516,518,523,680,687,697,707,716,726,735,1078 'hemi':189,200,974,981 'hemi.color':202 'hemi.groundcolor':205 'hemi.intensity':208 'hemi.position.set':195 'hemihelp':718,724 'hemilight':721 'hemispher':715 'hemispherelight':110,172,184 'high':138,645,649 'higher':256 'ibl':19,743 'illumin':145 'imag':745 'image-bas':744 'import':68,477,481,657,682,753,849 'improv':55 'indoor':982 'infinit':346 'initi':486 'input':1237 'intens':156,187,221,324,390,495,1062 'involv':42 'javascript':67,153,183,218,250,321,355,387,443,476,547,599,656,681,752,817,848,893,955,984,1037,1137 'key':894 'keylight':899,909 'keylight.position.set':904 'layer':1131,1139,1145,1152 'light':3,5,6,10,14,22,25,35,43,47,49,63,74,96,99,135,211,215,232,310,319,348,380,386,411,470,475,576,679,737,742,747,835,839,847,887,892,895,897,911,928,930,987,1035,1048,1086,1089,1096,1125,1130,1136,1138,1142,1182,1197 'light.castshadow':577 'light.color.sethsl':1071 'light.intensity':1063 'light.layers.set':1140 'light.position':1051,1056 'light1':990,1006 'light1.lookat':1001 'light1.position.set':997 'light2':1008,1024 'light2.lookat':1019 'light2.position.set':1015 'lighthelper.update':1081 'lightmap':1187 'lightprob':858,862 'lightprobe.copy':863,882 'lightprobegener':850 'lightprobegenerator.fromcuberendertarget':883 'lightprobegenerator.fromcubetexture':864 'like':317,381 'limit':1085,1199 'lit':535 'low':109,115,121,561,639 'main':896 'map':254,369,557,572,632,751,1106,1190 'match':1208 'materi':773,1180,1181 'math.cos':1053 'math.pi':402,430 'math.pi/2)':429 'math.sin':1058,1065 'max':428 'maximum':343 'medium':126,132,642 'mesh':1149,1157 'mesh.castshadow':583,1162 'mesh.layers.enable':1147 'mesh.receiveshadow':585,1164 'meshphysicalmateri':527,531 'meshstandardmateri':526 'miss':1245 'modifi':165 'mood':60 'multipl':985 'must':485 'nativ':542 'need':30,1117,1126,1173 'new':78,86,159,190,224,303,329,397,500,519,663,690,700,710,719,729,759,798,820,859,872,876,900,917,933,947,959,975,991,1009,1029,1040 'normal':630 'nx.jpg':826 'ny.jpg':828 'nz.jpg':830 'object':147,582,1133,1169 'often':1109,1170 'omnidirect':123 'opac':669 'opposit':913 'optim':21,597 'option':776 'orbit':1047 'orthograph':266 'othermesh.layers.disable':1154 'outdoor':181,953 'output':1217 'overview':98 'parallel':117,210 'pbr':772 'pcfsoftshadowmap':285 'penumbra':393 'perform':23,50,637,1082 'permiss':1238 'perspect':364,452 'physic':350 'plane':588 'pmremgener':792,797 'pmremgenerator.compileequirectangularshader':801 'pmremgenerator.dispose':813 'pmremgenerator.fromequirectangular':807 'point':233,316,412,842,891 'pointhelp':699,705 'pointlight':122,308,322,328,340,353,696,702 'pointlight.castshadow':356 'pointlight.decay':347 'pointlight.distance':342 'pointlight.position.set':335 'pointlight.shadow.bias':374 'pointlight.shadow.camera.far':372 'pointlight.shadow.camera.near':370 'pointlight.shadow.mapsize.height':360 'pointlight.shadow.mapsize.width':358 'posit':673 'postprocess':1193 'probe':836 'project':464 'proper':534 'properti':201,341,423 'puls':1061 'px.jpg':825 'py.jpg':827 'pz.jpg':829 'qualiti':562,635,640,643,646,650 'quick':65 'r183':528 'radian':427 'radius':284 'rang':344,438 'ray':118,212 'readabl':57 'realism':58 'realist':474 'rectangular':468 'rectarealight':133,139,467,493,537,725 'rectarealighthelp':478,520,683,730 'rectarealightuniformslib':482 'rectarealightuniformslib.init':492,988 'recthelp':728,733 'rectlight':499,515,521,731 'rectlight.add':522,732 'rectlight.lookat':510 'rectlight.position.set':506 'reflect':795 'render':490,551,800,868,880,884 'renderer.shadowmap.enabled':552 'renderer.shadowmap.type':554 'requir':141,1236 'resolut':665 'respons':1183 'review':1229 'rgbeload':754,758,760 'rgbeloader.load':761,802 'rim':929 'runtim':167 'safeti':1239 'scale':671 'scene':39,56,182,768,881,1050,1099 'scene.add':82,94,163,199,244,246,306,339,419,421,514,677,694,704,713,723,861,908,925,941,951,969,980,1005,1023,1033 'scene.background':781,833 'scene.backgroundblurriness':783 'scene.backgroundintensity':790 'scene.environment':774,810,831 'scope':1210 'see':1176 'select':1160 'set':17,766 'setup':64,75,544,888 'shader':1091 'shadow':8,16,45,101,140,152,249,253,264,279,287,290,299,354,362,442,450,463,541,543,546,556,571,598,601,620,631,653,1105,1113,1122,1127,1161 'shape':130,379 'sharper':257 'side':914 'simul':213 'size':255,633 'skill':1202 'skill-threejs-lighting' 'sky':175,203,971 'sky/ground':111 'skycolor':185 'small':1168 'smaller':1104 'soft':280,433,473 'softer':567,912 'solut':143 'sourc':216 'source-sickn33' 'space':844 'specif':1224 'spothelp':709,714 'spothelper.update':740 'spotlight':127,376,388,396,422,441,706,712 'spotlight.angle':424 'spotlight.castshadow':444 'spotlight.decay':439 'spotlight.distance':437 'spotlight.penumbra':432 'spotlight.position.set':406 'spotlight.shadow.bias':459 'spotlight.shadow.camera.far':455 'spotlight.shadow.camera.fov':457 'spotlight.shadow.camera.near':453 'spotlight.shadow.focus':465 'spotlight.shadow.mapsize.height':448 'spotlight.shadow.mapsize.width':446 'spotlight.target':420 'spotlight.target.position.set':415 'stage':385 'start':66 'static':1098 'stop':1230 'studio':983 'substitut':1220 'success':1242 'suffici':1110 'sun':119,217,956,958,970 'sun.castshadow':967 'sun.position.set':963 'support':102 'target':235,410,869 'task':41,1206 'test':1226 'textur':763,775,782,804,808,809,815,856,1102,1186 'texture.dispose':812 'texture.mapping':764 'three':70,72,890 'three-point':889 'three.ambientlight':79,160,948,1030 'three.basicshadowmap':559 'three.camerahelper':304 'three.clock':1041 'three.cubecamera':873 'three.cubetextureloader':821 'three.directionallight':87,225,901,918,934,960 'three.directionallighthelper':691 'three.equirectangularreflectionmapping':765 'three.hemispherelight':191,976 'three.hemispherelighthelper':720 'three.js':4,24,38,62 'three.lightprobe':860 'three.pcfshadowmap':563 'three.pcfsoftshadowmap':555,566 'three.pmremgenerator':799 'three.pointlight':330 'three.pointlighthelper':701 'three.rectarealight':501,992,1010 'three.spotlight':398 'three.spotlighthelper':711 'three.vsmshadowmap':569 'three.webglcuberendertarget':877 'three/examples/jsm/helpers/rectarealighthelper.js':480,685 'three/examples/jsm/lights/lightprobegenerator.js':852 'three/examples/jsm/lights/rectarealightuniformslib.js':484 'three/examples/jsm/loaders/rgbeloader.js':756 'three/examples/jsm/objects/contactshadows.js':660 'threej':2,1179,1185,1192 'threejs-light':1 'threejs-materi':1178 'threejs-postprocess':1191 'threejs-textur':1184 'tight':600,1112 'time':1045,1054,1059,1066,1072 'tip':1083 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'tradeoff':51 'treat':1215 'true':252,357,445,553,578,584,586,590,968,1163,1165 'tune':34 'type':7,44,97,558 'uniform':105,487 'unus':1121 'updat':734,1077 'use':11,28,748,778,1080,1094,1129,1200 'usual':593 'valid':1225 'varianc':570 'visual':298 'vs':636 'want':53 'webgl':489 'width':496 'window':136 'work':524 'x':1052 'yes':120,125,131 'z':1057","prices":[{"id":"b9858f4d-56dd-41f2-ae10-b436d34944b2","listingId":"dff4566c-a116-47d0-aa95-4481ad9cb622","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:19.137Z"}],"sources":[{"listingId":"dff4566c-a116-47d0-aa95-4481ad9cb622","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-lighting","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-lighting","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:19.137Z","lastSeenAt":"2026-04-22T06:52:01.444Z"}],"details":{"listingId":"dff4566c-a116-47d0-aa95-4481ad9cb622","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-lighting","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"54fba2fa79c32e7f16b41a799e90ae9298638bc9","skill_md_path":"skills/threejs-lighting/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-lighting"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"threejs-lighting","description":"Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-lighting"},"updatedAt":"2026-04-22T06:52:01.444Z"}}