Three.js Scene Inheritance and Global Properties

In Three.js, the Scene object serves as the root container for the entire 3D graphical universe, allowing you to organize and render cameras, lights, and 3D objects. This article explains how the Scene class inherits its core functionality from the foundational Object3D class, and details the specific global properties it introduces to manage rendering environments, background aesthetics, and global atmospheric effects.

How Scene Inherits from Object3D

In Three.js, Scene is a subclass of Object3D (class Scene extends Object3D). Through JavaScript’s prototypal inheritance, the Scene class automatically gains access to all properties, methods, and spatial capabilities of a standard 3D object.

Because of this inheritance, a Scene inherits: * Scene Graph Management: The ability to hold child objects using .add(object), remove them with .remove(object), and search through them using .getObjectByName(name) or .traverse(callback). * Transformations: Spatial properties like .position, .rotation, .scale, and .quaternion. While translating or rotating a parent scene is uncommon, it is technically possible because Scene inherits these transform properties. * Matrix Calculations: World and local matrices (.matrix and .matrixWorld) used by the renderer to calculate coordinates relative to the screen.

By building on top of Object3D, the Scene acts as the root node of the scene graph, hosting the hierarchical tree of meshes, groups, and lights.

Specific Global Properties Added by Scene

While Object3D provides spatial structure, the Scene class introduces unique properties designed to control the global rendering environment. The renderer processes these properties globally when drawing the scene.

1. Background Properties

These properties define what is rendered behind your 3D geometry: * Scene.background: Defines the background of the scene. It can accept a Color (solid color), a Texture (2D image), or a CubeTexture / WebGLCubeRenderTarget (for skyboxes). * Scene.backgroundBlurriness: A float value (between 0 and 1) that blurs the background texture. This is useful for creating depth-of-field effects with environment maps. * Scene.backgroundIntensity: Controls the brightness of the background texture or color. * Scene.backgroundRotation: An Euler angle representing the rotation of the background texture.

2. Environment Properties

These properties affect how physical materials reflect light from the surroundings without requiring explicit light sources: * Scene.environment: Accepts a Texture (often an HDR equirectangular image) that acts as a global environment map. This map is automatically applied as the default reflection/physical illumination source for all Physical and Standard materials in the scene. * Scene.environmentIntensity: Controls the intensity/brightness of the global environment map’s contribution to material lighting. * Scene.environmentRotation: An Euler angle that rotates the environment map, changing the direction of global reflections and ambient lighting.

3. Fog Properties

• Scene.fog: Implements global atmospheric depth. It accepts either a Fog instance (linear fog that increases linearly with distance) or a FogExp2 instance (exponential fog that grows denser exponentially with distance).

4. Override Material

• Scene.overrideMaterial: Forces every object inside the scene to render using the assigned material, ignoring their own assigned materials. This is highly useful for specific rendering passes, such as generating depth maps, shadow maps, or silhouette outlines.