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
Decision gist · record as of 2026-07-24
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.
Use it when
- Threejs Lighting covers four primary light types.
- Threejs Lighting shows you to enable shadows by setting renderer.shadowMap.enabled = true.
Install
calesthio/OpenMontage/threejs-lighting · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up and configure lighting in Three.js 3D scenes”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill teaches you how to transform dull or featureless 3D geometry into visually compelling scenes using Three.js. You'll learn to select appropriate material types, configure their properties, and strategically place light sources to achieve realistic shading and depth. Perfect for game developers and 3D graphics enthusiasts who want to move beyond basic mesh rendering.
This skill teaches the core principles of Three.js, a popular JavaScript library for creating interactive 3D graphics in web browsers. You'll explore fundamental concepts like scene setup, camera positioning, lighting, and object manipulation through practical examples designed to build your foundation in 3D web development.
This skill equips Claude Code with the ability to load and parse 3D models in diverse file formats through Three.js's comprehensive loader ecosystem. Whether you're working with glTF, OBJ, FBX, or other standard 3D formats, this integration simplifies asset management and model initialization for your projects.
R3f Lighting teaches you how to implement and fine-tune lighting systems within React Three Fiber environments. Discover techniques for creating realistic illumination effects, managing light sources, and optimizing performance in interactive 3D web scenes.
This skill equips you to create full-featured 3D games directly in the browser using Three.js. It handles scene setup, object rendering, collision detection, and game loop management—everything needed to prototype or ship a playable game. Perfect for developers wanting to leverage Claude Code for rapid game development.
threejs-webgl equips Claude Code with a comprehensive toolkit for creating immersive 3D graphics and WebGL-powered experiences. This skillstack integrates Three.js alongside complementary libraries like GSAP and Babylon.js, enabling developers to craft sophisticated animations and interactive visualizations for modern web applications.
More skills r3f-fundamentals (MIT)