How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-scenesBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
When to use this skill
ALWAYS use this skill when the user mentions:
Sceneas root,scene.background, environment or skyball setup at scene levelFogorFogExp2parameters (near,far,color, density) and interaction with camera far plane- Organizing render lists conceptually (children of scene)
IMPORTANT: scenes vs textures vs loaders
| Concern | Skill |
|---|---|
| Scene + fog API | threejs-scenes |
| Texture sampling, PMREM generator usage | threejs-textures |
| Fetching HDR/glTF | threejs-loaders |
Trigger phrases include:
- "Scene", "Fog", "FogExp2", "background", "雾"
- "场景根节点", "线性雾", "指数雾"
How to use this skill
- Instantiate
Sceneand add lights/meshes/cameras as children per graph rules (threejs-objects). - Choose fog: linear
Fogvs exponentialFogExp2for outdoor/horizon feel. - Tune fog
near/faralongside camerafarto avoid clipping artifacts. - Set
scene.backgroundtoColor,Texture, or cube map per docs; env lighting still needs matching renderer/material settings. - When user wants IBL from HDR file, point to loaders → textures → materials pipeline explicitly.
- Document that fog does not replace frustum culling for performance.
See examples/workflow-fog-background.md.
Doc map (official)
| Docs section | Representative links |
|---|---|
| Scenes | https://threejs.org/docs/#Scenes |
| Scenes | https://threejs.org/docs/Scene.html |
| Fog | https://threejs.org/docs/Fog.html |
| FogExp2 | https://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
faron camera with fog still needs scene scale consistency. backgroundrotation/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:
- Link
Scene,Fog, orFogExp2official pages. - Relate fog distances to threejs-camera
farplane and world scale. - Defer PMREM/HDR file steps to threejs-textures / threejs-loaders with one sentence each.
- Avoid duplicating full color-management tutorials—point to renderer + textures skills.
References
- https://threejs.org/docs/Scene.html
- https://threejs.org/docs/Fog.html
- https://threejs.org/docs/FogExp2.html
Keywords
English: scene, fog, fogexp2, background, environment, three.js
中文： 场景、雾、Fog、背景、环境、three.js
