3d-sky-background

Create procedural or panoramic sky backgrounds with coherent environment lighting for 3D scenes.

6.3k|743|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/MengTo/Skills --skill 3d-sky-background-mengto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 3d-sky-background
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/3d/3d-sky-background
Command: npx skills add https://github.com/MengTo/Skills --skill 3d-sky-background-mengto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a sky for a 3D scene often produces mismatched lighting, visible seams, stretched panoramas, or a background image that fails to light PBR objects. This Skill guides the construction of a camera-correct sky where the visible background, reflection environment, and sun lighting all belong to the same atmosphere. ## Core Features & Use Cases - Representation Selection: Choose between a licensed equirectangular panorama, a procedural atmosphere, or a hybrid based on the project's renderer, camera range, and color pipeline. - Coherent Lighting: Align a shared sun direction across the visible disk, directional light, sky rays, and PMREM-generated environment so shadows and reflections agree. - Day-to-Night Transitions: Interpolate horizon/zenith colors, sun glow, fog tint, stars, and cached environments without flashes or double tone mapping. - Use Case: When building an architectural visualization in Three.js, use this Skill to wrap a 360° panorama around the scene, generate a prefiltered PMREM environment for reflections, and animate a golden-hour-to-dusk transition with matching fog and exposure. ## Quick Start Use the 3d-sky-background skill to build a sky background that fits this 3D scene and its lighting.

Frequently Asked Questions about 3d-sky-background

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

FAQPage Schema
How do I add a sky background to a Three.js scene?▼

Use the engine's background facility, a fullscreen direction shader, or an inward-facing dome with depth writes and fog disabled. Derive color from the normalized viewing direction, blending a warm horizon into a cooler zenith, and keep the dome inside the camera clipping range.

Should I use a procedural sky or an HDRI panorama for 3D backgrounds?▼

Use a licensed panorama when cloud composition matters and a procedural sky when changing sun position matters. A partial landscape photograph should not be stretched over a full sphere; record its angular coverage and horizon position instead.

Why doesn't my sky background image light my PBR objects?▼

A background photograph alone does not light PBR materials. Generate a prefiltered PMREM environment for reflections and ambient light, and add a separate directional light for shadow-casting sun illumination.

Why is there a blurred stripe at my sky panorama seam?▼

A longitude-wrapping shader discontinuity causes bad texture derivatives at the seam, producing a blurred stripe. Prefer continuous sampling coordinates with texture wrapping, or supply corrected gradients, and test while orbiting the camera.

How do I animate a day-to-night sky transition without performance issues?▼

Interpolate continuous weights for horizon and zenith colors, sun glow, fog tint, exposure, moon, and stars. Interpolate cached PMREM environments or refresh at state changes rather than rebuilding the environment every frame.