threejs-lighting

Name: threejs-lighting
Availability: InStock
Author: neighbor-game-ai

Creates Three.js scenes with ambient/directional lighting and shadowed ground planes.

Updated Aug 23, 2026

Search Tags:#threejs #lighting #shadows #ambient-light #directional-light #shadow-map

Ready to run

npx skills add https://github.com/neighbor-game-ai/DreamCore-V2-sandbox --skill threejs-lighting-neighbor-game-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-lighting
Source: https://github.com/neighbor-game-ai/DreamCore-V2-sandbox/tree/main/.claude/skills/threejs-lighting
Command: npx skills add https://github.com/neighbor-game-ai/DreamCore-V2-sandbox --skill threejs-lighting-neighbor-game-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js projects often struggle to achieve realistic lighting and shadows without manual tuning. This Skill provides a ready-to-use setup for ambient light, directional light with shadows, shadow map tuning, and a ground plane that receives shadows, speeding up scene realism.

Core Features & Use Cases

AmbientLight setup for global illumination.
DirectionalLight with shadows, including shadow map size tuning.
Shadow configuration for castShadow and receiveShadow on meshes.
Ground plane creation that receives shadows for realism.
Use Case: Create a simple scene with a model casting shadows on a shadow-receiving ground.

Quick Start

Create a basic Three.js scene with ambient light, a directional light that casts shadows, and a ground plane that receives shadows.

Frequently Asked Questions about threejs-lighting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up directional light and shadows in Three.js?▼

To set up directional light and shadows in Three.js, configure a DirectionalLight with castShadow enabled, tune the shadow map size, and enable castShadow and receiveShadow on meshes interacting with a ground plane.

Why does my Three.js model not cast shadows on the ground?▼

Shadows fail in Three.js when castShadow is not enabled on the mesh or light, receiveShadow is missing on the ground plane, or the light's shadow map size is untuned. Configure these properties to ensure proper ground-shadow interaction.

What is the best way to use ambient light with directional light in Three.js?▼

The best way to use ambient light with directional light in Three.js is combining an AmbientLight for global illumination and a DirectionalLight for targeted shadows, creating realistic scene lighting without manual tuning.

How do I tune shadow map size for realistic Three.js scenes?▼

Tune shadow map size in Three.js by adjusting the shadow.mapSize property on the DirectionalLight, which directly controls shadow resolution and realism for meshes casting shadows onto a receiving ground plane.

Can I use this Three.js lighting setup for intermediate projects?▼

Yes, this Three.js lighting setup supports basic to intermediate projects by providing ambient illumination, directional lighting with shadow map tuning, and ground-shadow interaction for realistic scenes.

Do I need a ground plane to receive shadows in Three.js?▼

Yes, you need a ground plane with receiveShadow enabled to display shadows cast by meshes, completing the ground-shadow interaction required for realistic Three.js scene lighting.