threejs-scenes

Q: How do I install threejs-scenes?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-scenes in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-scenes/ (personal) or .claude/skills/threejs-scenes/ (project).

by full-stack-skillsProductivity & Automation

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. Use when configuring world container, atmospheric fog, or background; for HDR env map file loading use threejs-loaders; for GPU texture settings after load use threejs-textures; for tone mapping use threejs-renderers.

Installs: 404
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads threejs-scenes automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

Keywords

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

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

FAQ

What does the threejs-scenes skill do?

How do I install threejs-scenes?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-scenes in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-scenes/ (personal) or .claude/skills/threejs-scenes/ (project).

Which AI agents can use threejs-scenes?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-scenes safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-scenes?

It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 404 recorded installs.