Skip to main content
skill CX Codex

3d-sky-background — Claude Code skill: what it does, how to install

Builds camera-correct 3D skies with procedural atmosphere, horizon haze, aligned sun lighting, and coherent environment reflections.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add MengTo/Skills --skill 3d-sky-background -a claude-code
Open on GitHub

What 3d-sky-background does

The skill separates three core rendering concerns: the visible background, reflection and ambient environment, and direct sunlight. It works inside the project's existing rendering pipeline without bringing in a second renderer. Sky geometry is structured via fullscreen direction shaders or an inverted dome with depth writes and fog turned off.

Calculations remain in linear space, with display-referred textures tagged as sRGB. For equirectangular panoramas, the rules inspect seam filtering and align the image's photographed sun with the 3D directional light.

Rebuilding PMREM on every frame during time-of-day shifts can dominate GPU cost. Because of that, the instructions prioritize interpolating pre-filtered environment maps or triggering updates only at discrete state changes.

What it helps with

  • align direct sunlight angles with sky dome highlights and shadows
  • eliminate texture seam artifacts during 360-degree camera orbits
  • prevent PMREM recalculation bottlenecks during day-to-night transitions
  • render an immediate procedural sky fallback while large textures load

Example prompts for the agent

  • Set up a procedural sky dome with sunset haze and matching directional light.
  • Map an equirectangular panorama with asynchronous loading and a fallback gradient.
  • Configure camera-following sky coordinates with disabled depth writes and fog.

How to install 3d-sky-background

1Skills CLI (Vercel)

npx skills add MengTo/Skills --skill 3d-sky-background -a claude-code

2Manually: put the files in place

~/.claude/skills/3d-sky-background/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/3d-sky-background/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about 3d-sky-background

How do I install 3d-sky-background in Claude Code?

Run npx skills add MengTo/Skills --skill 3d-sky-background -a claude-code.

What does 3d-sky-background do?

It guides the creation of 3D sky backgrounds, coordinating procedural gradients, panoramas, PMREM reflections, and matching sun directions.

How does the skill handle day-to-night sky transitions?

It applies continuous blending to horizon colors, haze, and stars while reusing cached environment targets instead of generating PMREM on every frame.

Source text

SKILL.md · MIT
---
name: 3d-sky-background
description: Create a camera-correct sky background for a 3D scene with a procedural atmosphere or panorama, horizon haze, aligned sunlight, and coherent environment lighting. Use for architectural skies, outdoor 3D backgrounds, golden hour, and day-to-night sky transitions.
---

# 3D Sky Background

Build a sky that surrounds the world, with a readable horizon and lighting that belongs to the same atmosphere.

## Choose the representation

Inspect the project's renderer, camera range, color pipeline, environment lighting, and existing assets. Use an existing licensed panorama when its cloud composition matters, a procedural sky when changing sun position matters, or a restrained hybrid. Keep the project's rendering backend and version; do not add a second renderer for the sky.

Keep three responsibilities explicit: the visible sky background, the reflection/ambient environment, and direct sun lighting. A background photograph alone does not light PBR objects. A PMREM environment does not supply a shadow-casting directional sun. See the [PMREM documentation](https://threejs.org/docs/pages/PMREMGenerator.html).

## Build a stable surrounding sky

- Use the engine's background facility, a fullscreen direction shader, or an inward-facing dome with depth writes disabled and fog disabled. A dome must fit inside the camera's clipping range and follow camera translation; it should retain world orientation as the camera rotates.
- Derive color from the normalized viewing direction. Blend a pale warm horizon through a muted middle band into a cooler zenith. Keep the lower hemisphere compatible with the ground haze rather than leaving an exposed hard edge.
- Use a shared sun direction for the visible disk, glow, directional light, and any sky-ray pass. A broad halo and a small disk are separate terms; avoid a large white blob.
- Add distant silhouettes only when the composition needs depth. Keep them low contrast, with a hue and value close to the horizon.

## Map a panorama deliberately

A true equirectangular sky wraps a full 360° horizontally and 180° vertically. Establish a consistent world-axis convention, rotate the texture so its photographed sun matches the scene sun, and inspect both the seam and zenith.

A wide landscape photograph is a partial panorama. Record its angular coverage and horizon position; do not stretch it indiscriminately over a sphere. Seijaku aligns a partial sky image around the sun and mirrors its back coverage. That is a composition-specific shortcut; repeated cloud shapes may be visible during a full orbit. Prefer a complete panorama for unrestricted cameras.

When a custom shader wraps longitude, a discontinuity at the seam can cause bad texture derivatives and a blurred stripe. Prefer continuous sampling coordinates with texture wrapping; otherwise supply corrected gradients appropriate to the shader version. Test the seam while orbiting, not only in the initial view.

## Keep color and lighting coherent

Annotate display-referred color images as sRGB and keep lighting calculations in linear space. Apply tone mapping and output conversion once at the intended final stage. Do not copy a fitted inverse tone-map function from another project: Seijaku's fit is coupled to its custom final shader and exposure. Decide explicitly whether a photograph should be tone-mapped with the scene or composited through a separate display-referred path.

Provide a procedural gradient immediately, then load the sky asset asynchronously and blend it in. An asset error should leave a usable sky. Fit texture resolution to the visible angular coverage and target display; do not gate first interaction on an oversized sky image.

Generate a prefiltered environment when needed and reuse it. During a day/night or season transition, interpolate cached environments where supported or refresh at meaningful state changes. Rebuilding PMREM every frame can dominate the scene cost. Dispose superseded environment render targets without disposing textures still in use.

## Day, dusk, and night

Use continuous weights for horizon/zenith colors, sun glow, fog tint, exposure, moon, and stars. Fade stars after the sky darkens. Preserve enough ambient illumination to read materials at night. Animate cloud movement slowly, pause when hidden, and retain a designed still sky for reduced motion.

## Verify

- A full orbit and vertical look reveal no seam, stretched clouds, dome edge, or camera translation parallax.
- Sun direction, shadows, rays, and reflections agree at the intended hero view.
- Day/dusk/night changes avoid flashes, double tone mapping, and mismatched fog.
- The sky remains useful before its image loads and when that image fails.
- Mobile and 2× rendering preserve the horizon and avoid unexpected environment rebuilds.

Read [REFERENCES.md](REFERENCES.md) for source inspection and official APIs. Seijaku's relevant functions are `makeSky`, `makeHills`, `makeStars`, and its environment update path.

© MengTo · MIT · MengTo/Skills

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →

From the same set148

3d-virtual-tour A skill for building virtual tours through a 3D scene: authored camera paths, room navigation, orbit inspection. Useful for architectural walkthroughs and showrooms in Three.js. CX Codex +1 527installs 3d-retina-resolution Keeps 3D canvases sharp on Retina and HiDPI displays, including fixed 200% rendering. Useful for blurry WebGL previews and display-density changes. CX Codex +1 512installs 3d-high-resolution-textures Picks texture resolution and PBR maps so close-up surfaces stay sharp without blowing up GPU memory. CX Codex +1 508installs 3d-sky-rays A skill that adds crepuscular rays to a Three.js scene, shaped by roofs and foliage. Useful for golden-hour architectural shots. CX Codex +1 506installs 3d-falling-leaves A skill for Three.js and similar scenes: it walks the agent through falling leaves in world space, with tumble, sideways drift and instance recycling. CX Codex +1 499installs 3d-four-seasons Adds four-season transitions to a 3D scene by blending foliage, lighting, snow, and particles via uniforms without rebuilding the world. CX Codex +1 497installs codex-gpt-image-2-5-flare A skill that walks the agent through generating and editing artwork with Claude built-in image gen: transparent PNGs, sprites, emblems and UI graphics. CX Codex +1 475installs 3d-ultra-realistic-water A Three.js skill that builds an open sea with Gerstner waves, sun glitter, foam and a Kelvin wake. Useful when your scene has a horizon and a moving camera. CX Codex +1 408installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor