threejs-scenes

Verwendung

Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.

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

Vor dem Start

Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.

Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

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

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 Scene and add lights/meshes/cameras as children per graph rules (threejs-objects).
Choose fog: linear Fog vs exponential FogExp2 for outdoor/horizon feel.
Tune fog near/far alongside camera far to avoid clipping artifacts.
Set scene.background to Color, 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 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:

Link Scene, Fog, or FogExp2 official pages.
Relate fog distances to threejs-camera far plane 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