Threejs源码系列- Scene

Scene

Scene 类是 three.js 中用于管理 3D 场景的核心类，继承自 Object3D，负责定义渲染场景的整体环境和包含的对象，是场景图（Scene Graph）的根节点。

class Scene extends Object3D {
    constructor() {
        super()

        this.isScene = true;
        this.type = 'Scene';

        // 定义场景的背景，有效值包括：Color 实例（纯色背景）、Texture 实例（平面纹理背景）、CubeTexture 或 equirectangular 纹理（天空盒背景）
        this.background = null;

        // 为场景中所有物理材质设置环境贴图，但不会覆盖材质自身已设置的 envMap 属性
        this.environment = null;

        // 雾效实例，用于定义影响场景中所有物体的雾类型（线性雾 Fog 或指数雾 FogExp2）
        this.fog = null;

        // 背景模糊度，仅对 background 为环境贴图时有效，取值范围 0-1（0 最清晰，1 最模糊）
        this.backgroundBlurriness = 0;

        // 背景颜色强度，仅适用于背景为纹理的情况，1 为原始强度
        this.backgroundIntensity = 1;

        // 背景旋转角度（弧度），仅对 background 为环境贴图时有效
        this.backgroundRotation = new Euler();

        // 环境贴图强度，仅对 environment 为环境贴图时有效，1 为原始强度
        this.environmentIntensity = 1;

        // 环境贴图旋转角度（弧度），仅当使用 environment 时影响场景中的物理材质
        this.environmentRotation = new Euler();

        // 强制场景中所有物体使用该材质渲染，可通过材质的 allowOverride 设为 false 排除
        this.overrideMaterial = null;

        // 如果存在 three.js 开发者工具环境变量，则触发观察事件，将当前场景实例传递给调试工具
        if ( typeof __THREE_DEVTOOLS__ !== 'undefined' ) {

            __THREE_DEVTOOLS__.dispatchEvent( new CustomEvent( 'observe', { detail: this } ) );

        }
    }

    copy(source,, recursive) {}

    toJSON(meta) {}
}

核心作用

作为 3D 场景的容器，Scene 用于组织和管理所有需要渲染的元素（如模型、灯光、摄像机等），并控制场景的全局视觉属性（背景、雾效、环境贴图等）。

主要属性

1. 基础标识

   • isScene：布尔值（默认 true），用于类型判断，标识当前对象为 Scene 实例。
   • type：字符串（值为 'Scene'），描述对象类型，便于调试和分类。

2. 视觉环境设置

   • background：场景背景，可设为 Color（纯色）、Texture（平面纹理）或立方体贴图（天空盒），默认 null（无背景）。
   • fog：雾效实例（Fog 或 FogExp2），影响场景中所有物体的渲染，默认 null（无雾）。
   • environment：全局环境贴图，为场景中所有物理材质提供反射/折射源（不覆盖材质自身的 envMap），默认 null。

3. 背景与环境细节控制

   • backgroundBlurriness：背景模糊度（0-1 之间），仅对 background 为环境贴图时有效，默认 0（清晰）。
   • backgroundIntensity：背景颜色强度（1 为原始强度），仅对背景纹理有效，默认 1。
   • backgroundRotation：背景旋转角度（Euler 实例），仅影响环境贴图背景，默认 (0,0,0)。
   • environmentIntensity：环境贴图强度（1 为原始强度），影响使用 environment 的材质，默认 1。
   • environmentRotation：环境贴图旋转角度（Euler 实例），影响物理材质的反射/折射方向，默认 (0,0,0)。

4. 渲染控制

   • overrideMaterial：全局覆盖材质，强制场景中所有物体使用该材质渲染（可通过材质的 allowOverride: false 排除），默认 null。

核心方法

1. 构造函数 constructor()

   • 初始化父类 Object3D，设置类型标识，并初始化上述所有属性，同时支持 three.js 开发者工具的调试监听。

2. 复制方法 copy(source, recursive)

   • 复制另一个 Scene 实例的属性（包括背景、雾效、环境贴图等），并通过 super.copy 继承 Object3D 的复制逻辑（如子对象、变换等）。
   • recursive 参数控制是否递归复制子对象。

3. 序列化方法 toJSON(meta)

   • 将场景信息序列化为 JSON 格式，包含雾效、背景/环境的参数（模糊度、强度、旋转角度等），便于场景保存和加载。

与场景图的关系

• Scene 是场景图的根节点，通过继承 Object3D 的 children 属性管理所有子对象（如 Mesh、Light、Camera、Group 等）。
• 子对象的位置、旋转、缩放等变换均相对于父对象，形成层级关系（如汽车的轮子作为汽车对象的子节点，随汽车一起移动）。

总结

Scene 类是 three.js 场景管理的核心，不仅作为对象容器组织 3D 元素，还通过丰富的属性控制场景的整体视觉风格（背景、雾、环境反射等），是连接渲染流程与场景内容的关键桥梁。