[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-5450155e-df62-462c-9747-58581b1105fb":3,"$frLC0xnmEGkm7x1GslHIdolcClJknPW0WttTBkrOZd3M":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"5450155e-df62-462c-9747-58581b1105fb","threejs-lighting","Three.js 灯光 - 灯光类型、阴影、环境光照。用于添加灯光、配置阴影、设置IBL或优化灯光性能时使用。","cat_life_career","mod_other","sickn33,other","---\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.\nrisk: unknown\nsource: community\n---\n\n# 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\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 (WebGL renderer only)\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 Works with MeshStandardMaterial, MeshPhysicalMaterial\n\u002F\u002F r183: Clearcoat on MeshPhysicalMaterial is now properly lit by RectAreaLight\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\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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,241,975,"2026-05-16 13:44:10",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"e2631851-d3df-48d6-9aff-86a448b41640","1.0.0","threejs-lighting.zip",4110,"uploads\u002Fskills\u002F5450155e-df62-462c-9747-58581b1105fb\u002Fthreejs-lighting.zip","91c12822eb08dc02a97c38714d9cf028aa712ed8165c4360583748096ae7f051","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":12728}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]