ThreeView Properties

This page describes all properties and events available on a ThreeView instance.

Properties

camera

Type: ThreeViewCamera

Read-only (getter)

The camera controller that manages the view’s position, orientation, projection, and interactive control behavior.

Example:

// Read the camera's geographic position
const pos = view.camera.positionGeographic;

// Subscribe to camera movement events
view.camera.on("moveend", () => {
  console.log("Camera stopped");
});

globe

Type: Globe

Read-only (getter)

The Globe instance that manages terrain, imagery layers, and globe-specific settings. Controls various properties related to globe display, including transparency, wireframe display, and elevation heatmap color maps.

Example:

// Set globe transparency
view.globe.transparent = true;
view.globe.opacity = 0.8;

// Enable wireframe mode
view.globe.wireframe = true;

// Set color map for elevation heatmap
view.globe.elevationColormap = customColorMap;

atmosphere

Type: Atmosphere

Read-only (getter)

The instance that manages the atmosphere system. Handles sun and moon position calculations and atmospheric scattering texture management. When the date property is changed, sun and moon directions are automatically recalculated based on the ephemeris and reflected in related Descriptors such as SunLightDesc and SkyMeshDesc.

Example:

// Set the date to change the sun position
view.atmosphere.date = new Date("2024-06-21T12:00:00");

// Get the sun direction vector
const sunDirection = view.atmosphere.getSunDirection();

// Determine if the current location is at night
const isNight = view.atmosphere.isAtNight(view.camera.positionECEF);

// Monitor sun direction changes
view.atmosphere.on("sunChanged", (sunDirection) => {
  console.log("Sun direction changed:", sunDirection);
});

toneMappingExposure

Type: number

Gets or sets the tone mapping exposure value for HDR rendering. Higher values make the scene brighter, lower values make it darker.

Example:

// Increase exposure for a brighter scene
view.toneMappingExposure = 1.5;

// Decrease exposure for a darker scene
view.toneMappingExposure = 0.8;

animation

Type: boolean

Gets or sets whether continuous animation mode is enabled. When true, renders every frame; when false, renders only on changes.

Example:

// Enable continuous rendering
view.animation = true;

// Render only when needed (power saving)
view.animation = false;

screenSize

Type: Vector2

Gets the current screen size in pixels.

Read-only

Example:

const size = view.screenSize;
console.log(`Screen size: ${size.x} x ${size.y} pixels`);

pixelRatio

Type: number

Gets the current device pixel ratio.

Read-only

Example:

const ratio = view.pixelRatio;
console.log(`Pixel ratio: ${ratio}`);

shadowMapViewersEnabled

Type: boolean

Gets or sets whether the shadow map debug viewers are displayed on screen.

Example:

// Show shadow map debug views
view.shadowMapViewersEnabled = true;

// Hide debug views
view.shadowMapViewersEnabled = false;

cacheBytes

Type: number | undefined

Gets or sets the tile-cache memory budget in bytes (see the cacheBytes option). The getter returns the resolved budget (undefined before init() when no explicit option was given). Lowering it at runtime evicts retained tiles down to the new budget over the next frames. Setting undefined disables budgeting entirely, restoring the original destroy-on-unvisited tile lifecycle.

Example:

// Read the resolved budget
console.log(`cache budget: ${(view.cacheBytes ?? 0) / 1024 / 1024} MB`);

// Shrink the budget at runtime (evicts down to it over the next frames)
view.cacheBytes = 256 * 1024 * 1024;

// Disable tile-cache budgeting
view.cacheBytes = undefined;

lodFog

Type: getter LodFogSettings | undefined / setter Partial<LodFogSettings>

Gets or sets the LOD fog settings (see the lodFog option): a distance-based screen-space-error relaxation that keeps far tiles coarser. The getter returns the resolved settings (undefined before init()). Partial values assigned to the setter merge over the current settings; the next traversal re-selects tile LODs with the new curve.

Example:

// Strengthen the distance degrade — far tiles settle coarser
view.lodFog = { density: 2.5e-4, sseFactor: 3.0 };

// Only change one field; the rest keeps its current value
view.lodFog = { sseFactor: 4.0 };

dynamicSse

Type: getter DynamicSseSettings | undefined / setter Partial<DynamicSseSettings>

Gets or sets the dynamic screen-space-error settings (see the dynamicSse option): tilted, street-level horizon views tolerate a larger error for far tiles. The getter returns the resolved settings (undefined before init()). Partial values assigned to the setter merge over the current settings; the next traversal re-selects tile LODs with the new curve.

Example:

// Disable dynamic SSE
view.dynamicSse = { enabled: false };

// Tune the relaxation strength for horizon views
view.dynamicSse = { sseFactor: 16.0, heightFalloff: 0.25 };