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.
ALWAYS use this skill when the user mentions:
Scene as root, scene.background, environment or skyball setup at scene levelFog or FogExp2 parameters (near, far, color, density) and interaction with camera far planeIMPORTANT: 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 and add lights/meshes/cameras as children per graph rules (threejs-objects).Fog vs exponential FogExp2 for outdoor/horizon feel.near/far alongside camera far to avoid clipping artifacts.scene.background to Color, Texture, or cube map per docs; env lighting still needs matching renderer/material settings.import * as THREE from 'three';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
// Linear fog — match color with background to hide horizon seam
scene.fog = new THREE.Fog(0xa0a0a0, 10, 50);
// Ensure camera far plane covers fog range
camera.far = 60; // slightly beyond fog far
camera.updateProjectionMatrix();
| Docs section | Representative links |
|---|---|
| Scenes | https://threejs.org/docs/Scene.html |
| Fog | https://threejs.org/docs/Fog.html |
| FogExp2 | https://threejs.org/docs/FogExp2.html |
Scene, fog types, background field semantics at API level.Fog; custom atmospheric scattering shaders beyond core fog API.far on camera with fog still needs scene scale consistency.background rotation/intensity features depend on renderer version—cite current docs.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”.
When answering under this skill, prefer responses that:
Scene, Fog, or FogExp2 official pages.far plane and world scale.English: scene, fog, fogexp2, background, environment, three.js
中文: 场景、雾、Fog、背景、环境、three.js