{"enrichment":{"faq":[{"a":"Threejs Lighting teaches you to add lights by creating light objects and adding them to your scene. Start by instantiating a light type (AmbientLight, DirectionalLight, PointLight, or SpotLight), configure its properties like color and intensity, then call scene.add(light). Each light type illuminates differently\u2014ambient provides uniform lighting, directional mimics sunlight, point lights radiate from a position, and spotlights create focused beams. Use Claude Code to experiment with placement and intensity values in real-time.","q":"How do I add lights in Three.js?"},{"a":"Threejs Lighting covers four primary light types. AmbientLight illuminates all objects uniformly without direction or shadow. DirectionalLight simulates distant light like the sun, casting parallel rays and supporting shadows. PointLight radiates from a single point in all directions, useful for lamps or explosions. SpotLight creates a cone-shaped beam from a position with direction, ideal for flashlights or stage lighting. HemisphereLight provides two-color lighting from above and below for outdoor scenes.","q":"What are the different light types in Threejs?"},{"a":"Threejs Lighting shows you to enable shadows by setting renderer.shadowMap.enabled = true, then configuring which lights cast shadows (light.castShadow = true) and which objects receive them (object.receiveShadow = true). Combine DirectionalLight or SpotLight with shadow-casting for depth. Adjust shadow properties like mapSize, camera bounds, and bias to balance quality and performance. Layer ambient and directional lights together for natural illumination with realistic depth and contrast.","q":"How can I implement realistic lighting and shadows in Three.js?"},{"a":"Threejs Lighting recommends limiting shadow-casting lights to 1\u20132 per scene, as each adds significant GPU cost. Use lower shadow map resolutions for distant objects. Prefer AmbientLight and HemisphereLight over multiple PointLights when possible\u2014they're cheaper computationally. Bake static lighting into textures for fixed scenes. Monitor performance with renderer.info and adjust light count, shadow quality, and draw calls. Claude Code lets you test optimizations and measure frame rates interactively.","q":"What's the best way to optimize lighting performance in Threejs?"},{"a":"Threejs Lighting teaches you to control light appearance via color and intensity parameters. Pass a color as a hex value or Color object (e.g., 0xffffff for white) and set intensity as a multiplier\u20141.0 is default, higher values brighten the scene. Example: new THREE.DirectionalLight(0xff0000, 0.8) creates a red light at 80% strength. Adjust these values to balance realism and mood; use Claude Code to preview changes instantly and find the right balance for your scene.","q":"How do I set light color and intensity in Threejs?"},{"a":"Threejs Lighting introduces light helpers\u2014visual debugging tools that show light position, direction, and coverage. DirectionalLightHelper displays a wireframe pyramid showing the light's frustum. PointLightHelper shows a sphere at the light's position. SpotLightHelper visualizes the spotlight cone. Create helpers with new THREE.DirectionalLightHelper(light, size) and add to scene. Helpers are invisible in final renders but invaluable for positioning lights and diagnosing illumination problems during development.","q":"What are light helpers and how do I use them in Threejs?"}],"shadow_tags":["3d-rendering","light-sources","scene-illumination","shadow-casting","visual-effects"],"summary_rewrite":"Master Three.js lighting by learning how to implement and fine-tune various light sources in your 3D environments. This skill covers ambient, directional, and point light setup, helping you achieve realistic illumination and visual depth in your scenes. Work with Claude Code to experiment with light properties and see real-time rendering results."},"gist":{"api_url":"https://skillfed.io/api/skills/calesthio/OpenMontage/threejs-lighting.json","as_of":"2026-07-24","description":"Threejs Lighting teaches you to add lights by creating light objects and adding them to your scene. npx skillfed install calesthio/OpenMontage/threejs-lighting","install":{"manual":["git clone https://github.com/calesthio/OpenMontage","cp -r OpenMontage ~/.claude/skills/threejs-lighting"],"primary":"npx skillfed install calesthio/OpenMontage/threejs-lighting","version":"0a32e8d2"},"kind":"skill","mirror_url":"https://skillfed.io/calesthio/OpenMontage/threejs-lighting.md","similar":[{"id":"EnzeD/r3f-skills/r3f-lighting","name":"R3f Lighting","publisher":"EnzeD/r3f-skills","url":"https://skillfed.io/EnzeD/r3f-skills/r3f-lighting"},{"id":"gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting","name":"threejs-materials-lighting","publisher":"gamedev-skills/awesome-gamedev-agent-skills","url":"https://skillfed.io/gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting"},{"id":"freshtechbro/claudedesignskills/threejs-webgl","name":"threejs-webgl","publisher":"freshtechbro/claudedesignskills","url":"https://skillfed.io/freshtechbro/claudedesignskills/threejs-webgl"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-fundamentals","name":"r3f-fundamentals","publisher":"Bbeierle12/Skill-MCP-Claude","url":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/r3f-fundamentals"},{"id":"calesthio/OpenMontage/threejs-fundamentals","name":"Threejs Fundamentals","publisher":"calesthio/OpenMontage","url":"https://skillfed.io/calesthio/OpenMontage/threejs-fundamentals"}],"title":"Threejs Lighting by calesthio: Set up and configure lighting in Three.js 3D scenes \u2014 SkillFed","use":{"when":["Threejs Lighting covers four primary light types.","Threejs Lighting shows you to enable shadows by setting renderer.shadowMap.enabled = true."]},"what":{"lead":"Threejs Lighting teaches you to add lights by creating light objects and adding them to your scene. Start by instantiating a light type (AmbientLight, DirectionalLight, PointLight, or SpotLight), configure its properties like color and intensity, then call scene.add(light). Each light type illuminates differently\u2014ambient provides uniform lighting, directional mimics sunlight, point lights radiate from a position, and spotlights create focused beams. Use Claude Code to experiment with placement and intensity values in real-time."}},"id":"calesthio/OpenMontage/threejs-lighting","install":{"mode":"external","repo":"https://github.com/calesthio/OpenMontage"},"links":{"html":"https://skillfed.io/calesthio/OpenMontage/threejs-lighting","md":"https://skillfed.io/calesthio/OpenMontage/threejs-lighting.md","repo":"https://github.com/calesthio/OpenMontage"},"meta":{"agents_supported":["claude-code"],"first_seen":"2026-07-28","forks":5160,"language":"Python","last_updated":"2026-07-24","license":"AGPL-3.0","name":"Threejs Lighting","publisher":"calesthio","stars":42764},"relations":{"similar":[{"id":"CloudAI-X/threejs-skills/threejs-lighting"},{"id":"EnzeD/r3f-skills/r3f-lighting"},{"id":"gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting"},{"id":"freshtechbro/claudedesignskills/threejs-webgl"},{"id":"secondsky/claude-skills/threejs"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-fundamentals"},{"id":"calesthio/OpenMontage/threejs-fundamentals"},{"id":"CloudAI-X/threejs-skills/threejs-fundamentals"},{"id":"samhvw8/dot-claude/3d-graphics"},{"id":"natea/fitfinder/threejs-game"}]},"slug":{"owner":"calesthio","repo":"OpenMontage","skill":"threejs-lighting"},"version":"0a32e8d2"}