ShadowMapViewer

This is a helper for visualising a given light's shadow map. It works for shadow casting lights: DirectionalLight and SpotLight. It renders out the shadow map and displays it on a HUD.

This module can only be used with WebGLRenderer. When using WebGPURenderer, import the class from ShadowMapViewerGPU.js.

Code Example

const lightShadowMapViewer = new ShadowMapViewer( light );
lightShadowMapViewer.position.x = 10;
lightShadowMapViewer.position.y = SCREEN_HEIGHT - ( SHADOW_MAP_HEIGHT / 4 ) - 10;
lightShadowMapViewer.size.width = SHADOW_MAP_WIDTH / 4;
lightShadowMapViewer.size.height = SHADOW_MAP_HEIGHT / 4;
lightShadowMapViewer.update();

Import

ShadowMapViewer is an addon, and must be imported explicitly, see Installation#Addons.

import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js';

Constructor

new ShadowMapViewer( light : Light )

Constructs a new shadow map viewer.

light

The shadow casting light.

Properties

.enabled : boolean

Whether to display the shadow map viewer or not.

Default is true.

.position : Object

The position of the viewer. When changing this property, make sure to call ShadowMapViewer#update.

Default is true.

.size : Object

The size of the viewer. When changing this property, make sure to call ShadowMapViewer#update.

Default is true.

Methods

.render( renderer : WebGLRenderer )

Renders the viewer. This method must be called in the app's animation loop.

renderer

The renderer.

.update()

Updates the viewer.

.updateForWindowResize()

Resizes the viewer. This method should be called whenever the app's window is resized.

Source

examples/jsm/utils/ShadowMapViewer.js