mcpField
T
threejs-scenes

threejs-scenes

github.com/full-stack-skillsDevelopment10384 installsUpdated 4w ago
Repository

About threejs-scenes

A scene API skill for three.js developers, focused on Scene, fog, and background settings. It explains how fog relates to the camera far plane and points to other documentation for HDR, textures, and related topics.

Key features

  1. 01Configure Scene and scene backgrounds
  2. 02Distinguish linear and exponential fog
  3. 03Align fog distances with the camera far plane
  4. 04Explain background, environment, and renderer settings
  5. 05Find documentation for HDR, loaders, and textures

Use cases

  1. 01Setting a background for a three.js scene
  2. 02Tuning fog to match scene scale
  3. 03Investigating fog and camera clipping issues
  4. 04Moving from fog setup to HDR environments

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-scenes

After installing, type/threejs-scenesin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlexamples/workflow-fog-background.md

Details

From the project README

When to use this skill

ALWAYS use this skill when the user mentions:

  • Scene as root, scene.background, environment or skyball setup at scene level
  • Fog or FogExp2 parameters (near, far, color, density) and interaction with camera far plane
  • Organizing render lists conceptually (children of scene)

IMPORTANT: scenes vs textures vs loaders

ConcernSkill
Scene + fog APIthreejs-scenes
Texture sampling, PMREM generator usagethreejs-textures
Fetching HDR/glTFthreejs-loaders

Trigger phrases include:

  • "Scene", "Fog", "FogExp2", "background", "雾"
  • "场景根节点", "线性雾", "指数雾"

How to use this skill

  1. Instantiate Scene and add lights/meshes/cameras as children per graph rules (threejs-objects).
  2. Choose fog: linear Fog vs exponential FogExp2 for outdoor/horizon feel.
  3. Tune fog near/far alongside camera far to avoid clipping artifacts.
  4. Set scene.background to Color, Texture, or cube map per docs; env lighting still needs matching renderer/material settings.
  5. When user wants IBL from HDR file, point to loaders → textures → materials pipeline explicitly.
  6. Document that fog does not replace frustum culling for performance.

See examples/workflow-fog-background.md.

Doc map (official)

Docs sectionRepresentative links
Sceneshttps://threejs.org/docs/#Scenes
Sceneshttps://threejs.org/docs/Scene.html
Foghttps://threejs.org/docs/Fog.html
FogExp2https://threejs.org/docs/FogExp2.html

Scope

  • In scope: Scene, fog types, background field semantics at API level.
  • Out of scope: HDR / glTF file fetch (threejs-loaders); PMREM and texture sampling (threejs-textures); tone mapping / output color space defaults (threejs-renderers); full-screen fog-only post stack (threejs-postprocessing) unless tying to scene Fog; custom atmospheric scattering shaders beyond core fog API.

Common pitfalls and best practices

  • Fog color should harmonize with background to hide the horizon seam.
  • Very large far on camera with fog still needs scene scale consistency.
  • background rotation/intensity features depend on renderer version—cite current docs.

Documentation and version

Scene, Fog, and background fields are documented under Scenes in three.js docs. Environment-related visuals often combine this skill with threejs-textures (PMREM) and threejs-loaders (HDR files)—link those pages when the user moves from “fog color” to “HDR sky”.

Agent response checklist

When answering under this skill, prefer responses that:

  1. Link Scene, Fog, or FogExp2 official pages.
  2. Relate fog distances to threejs-camera far plane and world scale.
  3. Defer PMREM/HDR file steps to threejs-textures / threejs-loaders with one sentence each.
  4. Avoid duplicating full color-management tutorials—point to renderer + textures skills.

References

Keywords

English: scene, fog, fogexp2, background, environment, three.js

中文： 场景、雾、Fog、背景、环境、three.js

Comments

Markdown supported