# LightComponentElement

Class · extends [`ComponentElement`](https://api.playcanvas.com/web-components/classes/ComponentElement.md)`<LightComponent>` · category: Components

Source: https://github.com/playcanvas/web-components/blob/252f001881302c266c8d727044408c32be2bb5e7/src/components/light-component.ts#L67

The LightComponentElement interface provides properties and methods for manipulating
[`<pc-light>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-light/) elements.
The LightComponentElement interface also inherits the properties and methods of the
[HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

Engine component: [LightComponent](https://api.playcanvas.com/engine/classes/LightComponent.html) (`light`).

**elementSummary** The `<pc-light>` element lights the scene from its entity — as a directional,
omni or spot light, from a point or from a rectangle, disk or sphere — with attributes for color,
intensity, range and shadows. Must be a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### cascadeBlend

```ts
get cascadeBlend(): number
set cascadeBlend(value: number)
```

Gets the cascade blend factor of the light, from 0 (no blending) to 1, which applies only to
`directional` lights with `num-cascades` greater than 1.

### cascadeDistribution

```ts
get cascadeDistribution(): number
set cascadeDistribution(value: number)
```

Gets the cascade distribution of the light, from 0 (linear split) to 1 (logarithmic split,
concentrating shadow resolution near the camera), which applies only to `directional` lights
with `num-cascades` greater than 1.

### castShadows

```ts
get castShadows(): boolean
set castShadows(value: boolean)
```

Gets the cast shadows flag of the light.

### color

```ts
get color(): Color
set color(value: Color)
```

Gets the color of the light.

### component

```ts
get component(): LightComponent | null
```

Gets the underlying PlayCanvas light component. `null` until the element is
ready — see [ComponentElement.component](https://api.playcanvas.com/web-components/classes/ComponentElement.md#component).

### innerConeAngle

```ts
get innerConeAngle(): number
set innerConeAngle(value: number)
```

Gets the inner cone angle of the light.

### intensity

```ts
get intensity(): number
set intensity(value: number)
```

Gets the intensity of the light.

### normalOffsetBias

```ts
get normalOffsetBias(): number
set normalOffsetBias(value: number)
```

Gets the normal offset bias of the light.

### numCascades

```ts
get numCascades(): number
set numCascades(value: number)
```

Gets the number of shadow cascades of the light, an integer from 1 (no cascades) to 4, which
applies only to `directional` lights.

### outerConeAngle

```ts
get outerConeAngle(): number
set outerConeAngle(value: number)
```

Gets the outer cone angle of the light.

### penumbraFalloff

```ts
get penumbraFalloff(): number
set penumbraFalloff(value: number)
```

Gets the penumbra falloff of the light.

### penumbraSize

```ts
get penumbraSize(): number
set penumbraSize(value: number)
```

Gets the penumbra size of the light.

### range

```ts
get range(): number
set range(value: number)
```

Gets the range of the light.

### shadowBias

```ts
get shadowBias(): number
set shadowBias(value: number)
```

Gets the shadow bias of the light.

### shadowBlockerSamples

```ts
get shadowBlockerSamples(): number
set shadowBlockerSamples(value: number)
```

Gets the number of shadow blocker samples.

### shadowDistance

```ts
get shadowDistance(): number
set shadowDistance(value: number)
```

Gets the shadow distance of the light.

### shadowIntensity

```ts
get shadowIntensity(): number
set shadowIntensity(value: number)
```

Gets the shadow intensity of the light.

### shadowResolution

```ts
get shadowResolution(): number
set shadowResolution(value: number)
```

Gets the shadow resolution of the light.

### shadowSamples

```ts
get shadowSamples(): number
set shadowSamples(value: number)
```

Gets the number of shadow samples.

### shadowType

```ts
get shadowType(): "pcf1-16f" | "pcf1-32f" | "pcf3-16f" | "pcf3-32f" | "pcf5-16f" | "pcf5-32f" | "vsm-16f" | "vsm-32f" | "pcss-32f"
set shadowType(value: "pcf1-16f" | "pcf1-32f" | "pcf3-16f" | "pcf3-32f" | "pcf5-16f" | "pcf5-32f" | "vsm-16f" | "vsm-32f" | "pcss-32f")
```

Gets the shadow type of the light.

### shape

```ts
get shape(): LightShape
set shape(value: LightShape)
```

Gets the shape of the light source: `punctual`, or an area light shaped as a `rect`, `disk`
or `sphere` that takes its size from the entity's scale and needs the lookup tables loaded by
`area-light-luts` on `<pc-app>`.

### type

```ts
get type(): "directional" | "omni" | "spot"
set type(value: "directional" | "omni" | "spot")
```

Gets the type of the light.

### volumetricScattering

```ts
get volumetricScattering(): number
set volumetricScattering(value: number)
```

Gets how strongly the light scatters into volumetric fog, which applies only to `omni` and
`spot` lights while a camera frame renders volumetric fog with local lights.

### vsmBias

```ts
get vsmBias(): number
set vsmBias(value: number)
```

Gets the VSM bias of the light.

### vsmBlurSize

```ts
get vsmBlurSize(): number
set vsmBlurSize(value: number)
```

Gets the VSM blur size of the light.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { cascadeBlend: number; cascadeDistribution: number; castShadows: boolean; color: Color; innerConeAngle: number; intensity: number; normalOffsetBias: number; numCascades: number; outerConeAngle: number; penumbraFalloff: number; penumbraSize: number; range: number; shadowBias: number; shadowBlockerSamples: number; shadowDistance: number; shadowIntensity: number; shadowResolution: number; shadowSamples: number; shadowType: number; shape: number; type: "directional" | "omni" | "spot"; volumetricScattering: number; vsmBias: number; vsmBlurSize: number }
```

Returns the data the component is created with. Overridden by subclasses to supply the
initial values of their cached properties. The element's `enabled` state is not among them:
the base class adds it when it creates the component.

**Returns** `{ cascadeBlend: number; cascadeDistribution: number; castShadows: boolean; color: Color; innerConeAngle: number; intensity: number; normalOffsetBias: number; numCascades: number; outerConeAngle: number; penumbraFalloff: number; penumbraSize: number; range: number; shadowBias: number; shadowBlockerSamples: number; shadowDistance: number; shadowIntensity: number; shadowResolution: number; shadowSamples: number; shadowType: number; shape: number; type: "directional" | "omni" | "spot"; volumetricScattering: number; vsmBias: number; vsmBlurSize: number }`: The initial component data.

## Inherited from [ComponentElement](https://api.playcanvas.com/web-components/classes/ComponentElement.md)

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `protected initComponent(): void`
- `ready(): Promise<LightComponentElement>`