full-stack-skills/threejs-skills

threejs-scenes

three.js Scene graph root object, linear Fog and exponential FogExp2, Scene.background for solid colors or textures, and high-level environment background concepts that tie to PMREM and loaders in other skills.

소스 보기

사용 방법

  1. 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
  2. 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
  3. 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-scenes

시작 전 확인

  • 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
  • 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

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

  • 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

관련 작업