Threejs Lighting
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.
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—ambient 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.
AI-generated summary based on this skill's SKILL.md
Install
calesthio/OpenMontage/threejs-lighting · repository language: Python
git clone https://github.com/calesthio/OpenMontage
cp -r OpenMontage ~/.claude/skills/threejs-lightinggenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add lights in Three.js?
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—ambient 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.
What are the different light types in Threejs?
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.
How can I implement realistic lighting and shadows in Three.js?
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.
What's the best way to optimize lighting performance in Threejs?
Threejs Lighting recommends limiting shadow-casting lights to 1–2 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—they'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.
How do I set light color and intensity in Threejs?
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—1.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.
What are light helpers and how do I use them in Threejs?
Threejs Lighting introduces light helpers—visual 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.