Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-scenesAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
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

