# PlayCanvas Web Components API: All Pages

> The API reference of `@playcanvas/web-components` 0.28.0: the classes behind the `<pc-*>` custom elements, and the library's JavaScript API.

Index: https://api.playcanvas.com/web-components/llms.txt
Total Pages: 56
Generated: 2026-10-08

================================================================================

URL: https://api.playcanvas.com/web-components/classes/AppElement.md

# AppElement

Class · extends [`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md) · category: Application

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/app.ts#L139

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

The element is sized like a replaced element such as `<video>`: a block-level box that the
page's CSS controls, 300x150 by default. The application's canvas always fills the element,
and the drawing buffer resolution follows the element's size (capped by `max-pixel-ratio`),
tracked live via a ResizeObserver — so the element can be embedded at any size, resized by
its container, or made fullscreen with ordinary CSS such as `width: 100vw; height: 100dvh`.

Pointer input over the canvas is hit-tested against the scene and dispatched as pointer events
on the entity elements under the pointer, where they behave like the DOM's own pointer events;
`picking` controls when that happens. The canvas keeps receiving its native events too, so a
listener on this element sees both kinds - `event.target` tells them apart.

**elementSummary** The `<pc-app>` element creates a PlayCanvas application and the canvas it renders
into, and is the root of every scene. It holds the `<pc-asset>`, `<pc-material>`, `<pc-wasm>` and
`<pc-scene>` elements, loads the area light lookup tables from one of its assets, sets how
fast the application and its physics simulation run, and the page's CSS sizes it, as it would a
`<video>`.

**fires** progress - Fired while the application preloads its assets. `loaded` and
`total` are asset counts, not bytes, and an asset that fails to load still counts as loaded.
Fired at least once per boot, and the final event always has `loaded` equal to `total`. Does
not bubble.

**fires** error - Fired when the application cannot boot because no graphics device
could be created (for example, a browser with WebGL disabled). `message` names the requested
backends and `error` holds the underlying failure. The element never becomes ready
and `app` stays `null` — listen for this event to show a fallback UI. Removing the element and
re-inserting it retries the boot with its current attributes. Does not bubble.

## Accessors

### alpha

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

Gets whether the frame buffer has an alpha channel.

### antialias

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

Gets whether the frame buffer is anti-aliased.

### app

```ts
get app(): AppBase | null
```

The PlayCanvas application instance. `null` until the element is ready, and again once it
has been removed from the document — await [whenReady](https://api.playcanvas.com/web-components/functions/whenReady.md) or the element's `ready()`
promise before accessing it.

### areaLightLuts

```ts
get areaLightLuts(): string
set areaLightLuts(value: string)
```

Gets the id of the `<pc-asset>` holding the area light lookup tables, whose loading also
enables area lights for the application.

### backend

```ts
get backend(): "webgpu" | "webgl2" | "null"
set backend(value: "webgpu" | "webgl2" | "null")
```

Gets the graphics backend.

### depthBuffer

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

Gets whether the frame buffer has a depth buffer.

### devtools

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

Gets whether the application announces itself to developer tools, such as the PlayCanvas
Inspector browser extension, so they can find and inspect it.

### loadingBar

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

Gets whether the application shows its built-in loading bar while it boots and preloads
its assets.

### loadProgress

```ts
get loadProgress(): number
```

The asset preload progress of the application, as a fraction from 0 to 1. It is 0 until
preloading begins (and again once the element has been removed from the document), and 1
once preloading has finished — including when there was nothing to preload. Read this to
initialize a loading UI; subsequent updates arrive via the `progress` event.

### maxPixelRatio

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

Gets the cap on the pixel ratio the application renders at.

### physicsTimeScale

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

Gets the scale on the time the physics simulation advances by each frame, applied on top of
`time-scale`: 0 pauses physics alone while the rest of the application keeps running.

### picking

```ts
get picking(): "auto" | "always" | "none"
set picking(value: "auto" | "always" | "none")
```

Gets how the application decides whether to pick the scene under the pointer, which it
does to dispatch pointer events on entity elements: `auto` picks for an event type while a
listener for it is registered on an entity element or `<pc-scene>`, `always` for every
pointer event, and `none` never.

### stencilBuffer

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

Gets whether the frame buffer has a stencil buffer.

### timeScale

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

Gets the scale on the time the application advances by each frame. Scripts, animation and
physics all advance by the scaled time, so 0 pauses all three together.

### withCredentials

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

Gets whether asset requests send credentials (cookies and HTTP authentication) to other
origins, which applies to every application on the page. Once the application has booted,
this reports the engine's page-wide setting - which another `<pc-app>` may have switched on -
rather than this element's own attribute.

## Methods

### elementFromEntity

```ts
elementFromEntity(entity: Entity): EntityBaseElement | null
```

Returns the `<pc-entity>`, `<pc-model>` or `<pc-node>` element whose backing entity is
`entity`, or `null` if the entity is not fronted by an element of this application - for
example, an unbound node inside a model's instantiated hierarchy, or an entity created
through the engine API.

**Parameters**

- `entity` (`Entity`): The entity to look up.

**Returns** [`EntityBaseElement`](https://api.playcanvas.com/web-components/classes/EntityBaseElement.md) `| null`: The element fronting the entity, or `null`.

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

- `get closestApp(): AppElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<AppElement>`

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

- `get closestEntity(): EntityBaseElement | null`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/SceneElement.md

# SceneElement

Class · extends [`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md) · category: Application

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/scene.ts#L30

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

The scene element is the ancestor of every entity element, so the pointer events `<pc-app>`
dispatches on entities bubble through it, and it receives its own `pointerenter` and
`pointerleave` as the pointer moves onto and off its entities as a whole. A listener here is a
delegated listener for the whole scene: read `event.target` to find the entity element hit.

**elementSummary** The `<pc-scene>` element holds the entity hierarchy the application renders,
along with scene-wide fog, exposure, Gaussian splat, clustered lighting and gravity settings.
Must be a direct child of `<pc-app>`.

## Accessors

### exposure

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

Gets the exposure of the scene.

### fog

```ts
get fog(): "none" | "linear" | "exp" | "exp2"
set fog(value: "none" | "linear" | "exp" | "exp2")
```

Gets the fog type of the scene.

### fogColor

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

Gets the fog color of the scene.

### fogDensity

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

Gets the fog density of the scene.

### fogEnd

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

Gets the fog end distance of the scene.

### fogStart

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

Gets the fog start distance of the scene.

### gravity

```ts
get gravity(): Vec3
set gravity(value: Vec3)
```

Gets the gravity of the scene.

### gsplatDither

```ts
get gsplatDither(): "bayer2" | "bayer4" | "bayer8" | "bayer16" | "bluenoise" | "ignnoise"
set gsplatDither(value: "bayer2" | "bayer4" | "bayer8" | "bayer16" | "bluenoise" | "ignnoise")
```

Gets the noise pattern stochastic Gaussian splats dither their coverage against.

### gsplatSplatBudget

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

Gets the number of splats rendered across the scene.

### gsplatSplatBudgetMode

```ts
get gsplatSplatBudgetMode(): "target" | "limit"
set gsplatSplatBudgetMode(value: "target" | "limit")
```

Gets how the splat budget is used for streamed Gaussian splats.

### gsplatStochastic

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

Gets whether Gaussian splats render with stochastic alpha on WebGPU: drawn unsorted, with
dithered coverage and depth writes, rather than sorted and alpha blended.

### gsplatUseFog

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

Gets whether the scene fog applies to Gaussian splats.

### gsplatUseTonemap

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

Gets whether the camera's tonemapping and the scene's exposure apply to Gaussian splats.

### lightingMaxLights

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

Gets the maximum number of lights clustered lighting uses in a frame.

### scene

```ts
get scene(): Scene | null
```

The PlayCanvas scene instance. `null` until the containing application has been created —
await [whenReady](https://api.playcanvas.com/web-components/functions/whenReady.md) or the element's `ready()` promise before accessing it.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<SceneElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/SkyElement.md

# SkyElement

Class · extends [`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md) · category: Application

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/sky.ts#L20

The SkyElement interface provides properties and methods for manipulating
`<pc-sky>` elements. The SkyElement interface also inherits the properties and
methods of the [HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

**elementSummary** The `<pc-sky>` element renders a skybox from a texture asset, projected as an
infinite background, a box or a dome, and optionally lights the scene from it. Must be a direct
child of `<pc-scene>`.

## Accessors

### asset

```ts
get asset(): string
set asset(value: string)
```

Gets the id of the `pc-asset` to use for the skybox.

### center

```ts
get center(): Vec3
set center(value: Vec3)
```

Gets the center of the skybox.

### intensity

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

Gets the intensity of the skybox.

### lighting

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

Gets whether the skybox is used as a light source.

### mipLevel

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

Gets the mip level of the skybox.

### rotation

```ts
get rotation(): Vec3
set rotation(value: Vec3)
```

Gets the Euler rotation of the skybox.

### scale

```ts
get scale(): Vec3
set scale(value: Vec3)
```

Gets the scale of the skybox.

### type

```ts
get type(): "none" | "box" | "infinite" | "dome"
set type(value: "none" | "box" | "infinite" | "dome")
```

Gets the type of the skybox.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<SkyElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/AssetElement.md

# AssetElement

Class · extends [`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md) · category: Resources

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/asset.ts#L212

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

The element becomes ready once the containing application has started and the asset is in the
state declared by the markup: loaded for preloaded assets (even if loading failed — check the
asset's `resource`), or registered and awaiting a load for `lazy` assets. Elements inserted
while the application is running are created and registered on insertion, and begin loading
immediately unless `lazy`. A `pc-asset` must be a direct child of `pc-app` — elements placed
elsewhere, or with an unsupported asset type, never become ready.

A `lazy` asset loads on first use: the first time any element resolves it by `id` — a model,
a material map, a sky, a script `asset:` reference — or when the `lazy` attribute is removed,
whichever comes first. Until then it stays registered and unloaded.

For `texture` and `textureatlas` assets, the texture options (`address-u`, `address-v`,
`min-filter`, `mag-filter`, `anisotropy`, `mipmaps`, `srgb`, `flip-y`) apply when the texture is
created and — like `lazy` — are observed: changing one updates a texture that has already
loaded, and removing one restores the engine default. Changing `srgb` or `mipmaps` on a loaded
texture recreates the underlying GPU resource, so prefer declaring those up front. Each option
overrides the matching key in the `data` JSON; options left unset write nothing, leaving the
engine's per-format defaults in force.

Apart from `lazy` and the texture options, these attributes are read once when the asset is
created, so changing them later has no effect.

**elementSummary** The `<pc-asset>` element declares an asset for the application to load — a model,
texture, font, sound, script or JSON file — under an `id` that other elements reference. Must be
a direct child of `<pc-app>`.

**attribute** id - The identifier used to reference the asset from other elements.

**attribute** src - The URL of the asset to load.

**attribute** type - The asset type. Inferred from the `src` file extension when omitted.

**attribute** data - Additional asset data, as a JSON object.

**attribute** atlas - For a `sprite` asset, the `id` of the texture atlas asset it uses.
The atlas must be declared before the sprite.

**attribute** frame-keys - For a `sprite` asset, the atlas frame keys it uses, separated
by spaces or commas.

**attribute** pixels-per-unit - For a `sprite` asset, the number of pixels per world unit.

**attribute** render-mode - For a `sprite` asset, how the sprite is
rendered when resized.

**fires** load - Fired each time the asset finishes loading, including a `lazy` asset
loaded later and any subsequent reloads. Does not bubble — listen on this element, or use a
capture-phase listener on an ancestor to observe every asset.

**fires** error - Fired when the asset fails to load, with the engine's error in
`message`. Does not bubble. The element still becomes ready — readiness means the load settled,
not that it succeeded.

## Properties

### asset

```ts
asset: Asset<string> | null = null
```

The asset that is loaded. Available once the element is ready — await
[whenReady](https://api.playcanvas.com/web-components/functions/whenReady.md) or the element's `ready()` promise before accessing it.

## Accessors

### addressU

```ts
get addressU(): AddressMode | null
set addressU(value: AddressMode | null)
```

Gets the texture's horizontal (U) address mode.

### addressV

```ts
get addressV(): AddressMode | null
set addressV(value: AddressMode | null)
```

Gets the texture's vertical (V) address mode.

### anisotropy

```ts
get anisotropy(): number | null
set anisotropy(value: number | null)
```

Gets the texture's maximum anisotropic filtering level.

### flipY

```ts
get flipY(): boolean | null
set flipY(value: boolean | null)
```

Gets whether the texture's image data is flipped vertically at upload.

### lazy

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

Gets whether the asset should be loaded lazily.

### magFilter

```ts
get magFilter(): MagFilterMode | null
set magFilter(value: MagFilterMode | null)
```

Gets the texture's magnification filter.

### minFilter

```ts
get minFilter(): MinFilterMode | null
set minFilter(value: MinFilterMode | null)
```

Gets the texture's minification filter.

### mipmaps

```ts
get mipmaps(): boolean | null
set mipmaps(value: boolean | null)
```

Gets whether the texture generates and uses mipmaps.

### srgb

```ts
get srgb(): boolean | null
set srgb(value: boolean | null)
```

Gets whether the texture holds sRGB (gamma-encoded) color data.

## Methods

### get

```ts
static get(id: string): Asset<string> | null | undefined
```

Returns the [Asset](https://api.playcanvas.com/engine/classes/Asset.html) created by the `<pc-asset>` element with the given `id`, or
`undefined` if there is no such element or its asset has not been created yet.

**Parameters**

- `id` (`string`): The `id` of the `<pc-asset>` element.

**Returns** `Asset<string> | null | undefined`: The asset, or `undefined`.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<AssetElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/MaterialElement.md

# MaterialElement

Class · extends `HTMLElement` · category: Resources

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L209

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

A `pc-material` must be a direct child of `pc-app` — elements placed elsewhere log a warning
and never create a material. Elements inserted while the application is already running are
created on insertion.

The element is metal/rough by default: unlike a bare `StandardMaterial` it enables the metalness
workflow, which is what the `metalness-*` attributes assume and what glTF means by PBR. It also
defaults `metalness` to 0 rather than the engine's 1, because those two defaults have to be
chosen together - the engine's 1 is unreachable under its own `useMetalness` of false, and with
the workflow on it would make every material fully metallic, so `<pc-material diffuse="crimson">`
would render as dark tinted reflections of an environment that may not exist rather than as a
crimson surface. `metalness="1"` remains one attribute away.

The `roughness` and `roughness-map` attributes are aliases for `gloss` and `gloss-map` that
additionally invert the gloss channel; do not mix the two families on one element.

The two aliases are documented here rather than on an accessor, because they resolve to the
`gloss` properties and would otherwise inherit gloss's description - which reads inverted.

**elementSummary** The `<pc-material>` element defines a physically based material, which
`<pc-render>` elements apply by naming its `id`. It is metal/rough by default, with `metalness`
starting at 0. Must be a direct child of `<pc-app>`.

**attribute** roughness - The roughness of the material, from 0 (shiny) to 1 (rough). An
alias for `gloss` that also inverts it, so do not combine it with the `gloss` attributes.

**attribute** roughness-map - The id of the `pc-asset` to use as the roughness map. An
alias for `gloss-map` that also inverts the gloss channel, so do not combine it with the `gloss`
attributes.

## Properties

### material

```ts
material: StandardMaterial | null = null
```

The material. `null` until the containing application has created it — an element present
at startup has its material once the application is ready.

## Accessors

### alphaDither

```ts
get alphaDither(): number | null
set alphaDither(value: number | null)
```

Gets the alpha used by opacity dithering, which needs an `opacity-dither` mode other than
`none`.

### alphaTest

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

Gets the alpha test reference value.

### alphaToCoverage

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

Gets whether to use alpha to coverage.

### aoIntensity

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

Gets the strength of the ambient occlusion map.

### aoMap

```ts
get aoMap(): string
set aoMap(value: string)
```

Gets the id of the `pc-asset` used as the ambient occlusion map.

### aoMapChannel

```ts
get aoMapChannel(): ScalarChannel
set aoMapChannel(value: ScalarChannel)
```

Gets the color channel of the ambient occlusion map to sample.

### aoMapOffset

```ts
get aoMapOffset(): Vec2
set aoMapOffset(value: Vec2)
```

Gets the 2D offset of the ambient occlusion map.

### aoMapRotation

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

Gets the 2D rotation of the ambient occlusion map.

### aoMapTiling

```ts
get aoMapTiling(): Vec2
set aoMapTiling(value: Vec2)
```

Gets the 2D tiling of the ambient occlusion map.

### aoMapUv

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

Gets the UV channel the ambient occlusion map samples.

### blendType

```ts
get blendType(): BlendType
set blendType(value: BlendType)
```

Gets how the material is blended with the scene behind it.

### bumpiness

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

Gets the strength of the normal map.

### cull

```ts
get cull(): CullMode
set cull(value: CullMode)
```

Gets which faces of a mesh are culled.

### depthBias

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

Gets the offset applied to the depth of a fragment.

### depthTest

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

Gets whether fragments are tested against the depth buffer.

### depthWrite

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

Gets whether fragments write to the depth buffer.

### diffuse

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

Gets the diffuse color of the material.

### diffuseMap

```ts
get diffuseMap(): string
set diffuseMap(value: string)
```

Gets the id of the `pc-asset` used as the diffuse map.

### diffuseMapChannel

```ts
get diffuseMapChannel(): ColorChannel
set diffuseMapChannel(value: ColorChannel)
```

Gets the color channels of the diffuse map to sample.

### diffuseMapOffset

```ts
get diffuseMapOffset(): Vec2
set diffuseMapOffset(value: Vec2)
```

Gets the 2D offset of the diffuse map.

### diffuseMapRotation

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

Gets the 2D rotation of the diffuse map.

### diffuseMapTiling

```ts
get diffuseMapTiling(): Vec2
set diffuseMapTiling(value: Vec2)
```

Gets the 2D tiling of the diffuse map.

### diffuseMapUv

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

Gets the UV channel the diffuse map samples.

### emissive

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

Gets the emissive color of the material.

### emissiveIntensity

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

Gets the multiplier applied to the emissive color and map.

### emissiveMap

```ts
get emissiveMap(): string
set emissiveMap(value: string)
```

Gets the id of the `pc-asset` used as the emissive map.

### emissiveMapChannel

```ts
get emissiveMapChannel(): ColorChannel
set emissiveMapChannel(value: ColorChannel)
```

Gets the color channels of the emissive map to sample.

### emissiveMapOffset

```ts
get emissiveMapOffset(): Vec2
set emissiveMapOffset(value: Vec2)
```

Gets the 2D offset of the emissive map.

### emissiveMapRotation

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

Gets the 2D rotation of the emissive map.

### emissiveMapTiling

```ts
get emissiveMapTiling(): Vec2
set emissiveMapTiling(value: Vec2)
```

Gets the 2D tiling of the emissive map.

### emissiveMapUv

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

Gets the UV channel the emissive map samples.

### enableGGXSpecular

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

Gets whether to use the GGX specular model.

### flatShading

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

Gets whether the material is shaded with the geometric normal of each triangle.

### fresnelModel

```ts
get fresnelModel(): FresnelModel
set fresnelModel(value: FresnelModel)
```

Gets the Fresnel model used for specular reflections at grazing angles.

### gloss

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

Gets the glossiness of the material.

### glossInvert

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

Gets whether the gloss value and map are inverted.

### glossMap

```ts
get glossMap(): string
set glossMap(value: string)
```

Gets the id of the `pc-asset` used as the gloss map.

### glossMapChannel

```ts
get glossMapChannel(): ScalarChannel
set glossMapChannel(value: ScalarChannel)
```

Gets the color channel of the gloss map to sample.

### glossMapOffset

```ts
get glossMapOffset(): Vec2
set glossMapOffset(value: Vec2)
```

Gets the 2D offset of the gloss map.

### glossMapRotation

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

Gets the 2D rotation of the gloss map.

### glossMapTiling

```ts
get glossMapTiling(): Vec2
set glossMapTiling(value: Vec2)
```

Gets the 2D tiling of the gloss map.

### glossMapUv

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

Gets the UV channel the gloss map samples.

### heightMap

```ts
get heightMap(): string
set heightMap(value: string)
```

Gets the id of the `pc-asset` used as the height map.

### heightMapBase

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

Gets the height map value that sits at the level of the geometry.

### heightMapChannel

```ts
get heightMapChannel(): ScalarChannel
set heightMapChannel(value: ScalarChannel)
```

Gets the color channel of the height map to sample.

### heightMapFactor

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

Gets the strength of the parallax effect driven by the height map.

### heightMapOffset

```ts
get heightMapOffset(): Vec2
set heightMapOffset(value: Vec2)
```

Gets the 2D offset of the height map.

### heightMapRotation

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

Gets the 2D rotation of the height map.

### heightMapTiling

```ts
get heightMapTiling(): Vec2
set heightMapTiling(value: Vec2)
```

Gets the 2D tiling of the height map.

### heightMapUv

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

Gets the UV channel the height map samples.

### metalness

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

Gets how metallic the surface is.

### metalnessMap

```ts
get metalnessMap(): string
set metalnessMap(value: string)
```

Gets the id of the `pc-asset` used as the metalness map.

### metalnessMapChannel

```ts
get metalnessMapChannel(): ScalarChannel
set metalnessMapChannel(value: ScalarChannel)
```

Gets the color channel of the metalness map to sample.

### metalnessMapOffset

```ts
get metalnessMapOffset(): Vec2
set metalnessMapOffset(value: Vec2)
```

Gets the 2D offset of the metalness map.

### metalnessMapRotation

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

Gets the 2D rotation of the metalness map.

### metalnessMapTiling

```ts
get metalnessMapTiling(): Vec2
set metalnessMapTiling(value: Vec2)
```

Gets the 2D tiling of the metalness map.

### metalnessMapUv

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

Gets the UV channel the metalness map samples.

### name

```ts
get name(): string
set name(value: string)
```

Gets the name of the material - the label shown wherever materials surface by name, such
as profilers, GPU captures and the assignments `pc-model.hierarchy()` reports. Purely a
label: element references resolve through `id`.

### normalMap

```ts
get normalMap(): string
set normalMap(value: string)
```

Gets the id of the `pc-asset` used as the normal map.

### normalMapOffset

```ts
get normalMapOffset(): Vec2
set normalMapOffset(value: Vec2)
```

Gets the 2D offset of the normal map.

### normalMapRotation

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

Gets the 2D rotation of the normal map.

### normalMapTiling

```ts
get normalMapTiling(): Vec2
set normalMapTiling(value: Vec2)
```

Gets the 2D tiling of the normal map.

### normalMapUv

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

Gets the UV channel the normal map samples.

### occludeDirect

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

Gets whether ambient occlusion also attenuates direct lighting.

### occludeSpecular

```ts
get occludeSpecular(): OccludeSpecular
set occludeSpecular(value: OccludeSpecular)
```

Gets how specular reflections are occluded.

### opacity

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

Gets the opacity of the material, which requires a `blend-type` other than `none` to have
any visible effect.

### opacityDither

```ts
get opacityDither(): OpacityDither
set opacityDither(value: OpacityDither)
```

Gets the dithering used to render opacity.

### opacityFadesSpecular

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

Gets whether specular highlights fade out as the material becomes transparent.

### opacityMap

```ts
get opacityMap(): string
set opacityMap(value: string)
```

Gets the id of the `pc-asset` used as the opacity map.

### opacityMapChannel

```ts
get opacityMapChannel(): ScalarChannel
set opacityMapChannel(value: ScalarChannel)
```

Gets the color channel of the opacity map to sample.

### opacityMapOffset

```ts
get opacityMapOffset(): Vec2
set opacityMapOffset(value: Vec2)
```

Gets the 2D offset of the opacity map.

### opacityMapRotation

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

Gets the 2D rotation of the opacity map.

### opacityMapTiling

```ts
get opacityMapTiling(): Vec2
set opacityMapTiling(value: Vec2)
```

Gets the 2D tiling of the opacity map.

### opacityMapUv

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

Gets the UV channel the opacity map samples.

### parallaxMode

```ts
get parallaxMode(): ParallaxMode
set parallaxMode(value: ParallaxMode)
```

Gets how the height map offsets the UVs of the other maps.

### parallaxSamples

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

Gets the maximum number of height map taps along the view ray, which applies only when
`parallax-mode` is `occlusion`.

### parallaxShadowSamples

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

Gets the maximum number of height map taps towards each directional light, which applies
only when `parallax-mode` is `occlusion`.

### roughness

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

Gets the roughness of the material.

### roughnessMap

```ts
get roughnessMap(): string
set roughnessMap(value: string)
```

Gets the id of the `pc-asset` used as the roughness map.

### slopeDepthBias

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

Gets the depth offset applied in proportion to a surface's slope.

### specular

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

Gets the specular color of the material, which applies only when the metalness workflow is
disabled or `use-metalness-specular-color` is enabled.

### specularityFactor

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

Gets the strength of specular reflections at direct angles, which applies only when
`use-metalness-specular-color` is enabled.

### twoSidedLighting

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

Gets whether back faces are lit as though their normals were flipped.

### useFog

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

Gets whether the material is affected by scene fog.

### useLighting

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

Gets whether the material is affected by scene lights.

### useMetalness

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

Gets whether to use the metalness workflow.

### useMetalnessSpecularColor

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

Gets whether the specular color tints reflections while the metalness workflow is in use.

### useSkybox

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

Gets whether the material is lit by the scene's skybox.

### useTonemap

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

Gets whether the camera's tone mapping is applied to the material.

## Methods

### get

```ts
static get(id: string): StandardMaterial | null | undefined
```

Returns the [StandardMaterial](https://api.playcanvas.com/engine/classes/StandardMaterial.html) created by the `<pc-material>` element with the given
`id`, or `undefined` if there is no such element or its material has not been created yet.

**Parameters**

- `id` (`string`): The `id` of the `<pc-material>` element.

**Returns** `StandardMaterial | null | undefined`: The material, or `undefined`.

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/WasmElement.md

# WasmElement

Class · extends [`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md) · category: Resources

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/wasm.ts#L33

The WasmElement interface provides properties and methods for manipulating
[`<pc-wasm>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-wasm/)
elements. The WasmElement interface also inherits the properties and methods of the
[AsyncElement](https://api.playcanvas.com/web-components/classes/AsyncElement.md) interface.

The attributes are read once, when the module starts loading - on the element's first
connection, or earlier if a containing `<pc-app>` boots first and collects it - so changing
them later has no effect. The element becomes ready once the module has loaded. WebAssembly
modules configure engine-global state that never unloads, so readiness is not re-armed by
removing the element, and a re-inserted element does not load again.

A `<pc-wasm>` without a `name` warns and never becomes ready; a containing `<pc-app>` still
boots.

**elementSummary** The `<pc-wasm>` element loads a WebAssembly module the engine needs before the
application starts — `Ammo` for physics, `Basis` or `DracoDecoderModule` for compressed assets.
Must be a direct child of `<pc-app>`.

**attribute** name - The name of the WebAssembly module to configure, e.g. `Basis` or
`Ammo`.

**attribute** glue - The URL of the module's glue script.

**attribute** wasm - The URL of the module's WebAssembly binary.

**attribute** fallback - The URL of the module's asm.js fallback script, used when
WebAssembly is unavailable.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<WasmElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/EntityElement.md

# EntityElement

Class · extends [`EntityOwnerElement`](https://api.playcanvas.com/web-components/classes/EntityOwnerElement.md) · category: Entities

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/entity.ts#L71

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

The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
is over this entity's geometry, and behave like the DOM's own pointer events: each targets the
element fronting the deepest node under the pointer and propagates up the element tree, so a
listener on an ancestor entity, or on `<pc-scene>`, also receives the events of the entities
below it. `pointerenter` and `pointerleave` do not bubble - they are dispatched to each element
the pointer moves onto or off. `<pc-app>` picks the scene for an event type while a listener for
it is registered on an entity element or on `<pc-scene>`; its `picking` attribute covers
listeners it cannot see, such as a framework's delegated handlers.

**elementSummary** The `<pc-entity>` element creates an entity: a named, transformable node of the
scene hierarchy, and the host for component elements such as `<pc-camera>`, `<pc-light>` and
`<pc-render>`. Place it in the `<pc-scene>`, or nest it under another `<pc-entity>`, a
`<pc-model>` or a `<pc-node>` to parent it there.

**attribute** enabled - The enabled state of the entity.

**attribute** name - The name of the entity.

**attribute** position - The position of the entity.

**attribute** rotation - The rotation of the entity.

**attribute** scale - The scale of the entity.

**attribute** tags - The tags of the entity.

**attribute** onpointerover - Script to run when the pointer moves onto the entity, or onto
an entity below it.

**attribute** onpointerenter - Script to run when the pointer moves onto the entity or an
entity below it, having been over none of them.

**attribute** onpointermove - Script to run when the pointer moves over the entity.

**attribute** onpointerdown - Script to run when a pointer button is pressed over the
entity.

**attribute** onpointerup - Script to run when a pointer button is released over the
entity.

**attribute** onpointercancel - Script to run when the browser cancels a press that began
over the entity, for example because a touch became a scroll.

**attribute** onpointerout - Script to run when the pointer moves off the entity, or off an
entity below it.

**attribute** onpointerleave - Script to run when the pointer moves off the entity and
every entity below it.

**attribute** onclick - Script to run when the entity is clicked: a primary pointer button
pressed and then released over it.

**fires** pointerover - Fired when the pointer moves onto the entity. Bubbles;
`relatedTarget` is the element the pointer came from, which is `<pc-app>` when it came from the
background.

**fires** pointerenter - Fired when the pointer moves onto the entity or an entity
below it, having been over none of them. Does not bubble.

**fires** pointermove - Fired when the pointer moves over the entity.

**fires** pointerdown - Fired when a pointer button is pressed over the entity.

**fires** pointerup - Fired when a pointer button is released over the entity.

**fires** pointercancel - Fired on the entity a press began over when the browser
cancels that press, for example because a touch became a scroll. No click follows.

**fires** pointerout - Fired when the pointer moves off the entity. Bubbles;
`relatedTarget` is the element the pointer went to, which is `<pc-app>` when it went to the
background.

**fires** pointerleave - Fired when the pointer moves off the entity and every entity
below it. Does not bubble.

**fires** click - Fired when a primary pointer button is pressed and then released
over the entity. A press and release that picked different elements fires on their nearest common
ancestor instead, as in the DOM. `detail` carries the click count, so a double click arrives as a
click whose `detail` is 2.

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

- `protected _appElement: AppElement | null = null`
- `protected _built: boolean = false`
- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `get entity(): Entity | null`
- `get name(): string` · `set name(value: string)`
- `get position(): Vec3` · `set position(value: Vec3)`
- `get rotation(): Vec3` · `set rotation(value: Vec3)`
- `get scale(): Vec3` · `set scale(value: Vec3)`
- `get tags(): string[]` · `set tags(value: string[])`
- `protected _onBuilt(): void`
- `protected _onEntityDestroy(entity: Entity): void`
- `protected _onReady(): void`
- `protected _registerEntity(entity: Entity): void`
- `protected _resetReady(): void`
- `protected _unregisterEntity(entity: Entity): void`
- `ready(): Promise<EntityElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ModelElement.md

# ModelElement

Class · extends [`EntityOwnerElement`](https://api.playcanvas.com/web-components/classes/EntityOwnerElement.md) · category: Entities

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/model.ts#L186

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

The element creates and fronts a stable host entity: `entity` is that host, created when the
application builds its hierarchy and kept across `asset` changes, so the element's transform
and tags are instance placement that composes with whatever transform the asset authored on
its root. The instantiated content is parented beneath the host and exposed as
[contentEntity](https://api.playcanvas.com/web-components/classes/ModelElement.md#contententity).

The element becomes ready once its current asset selection has settled: the container asset
has loaded and its content root has been parented beneath the host, the load has failed
(`contentEntity` stays `null` — listen for `error`, or check `contentEntity`, to tell the
outcomes apart), or no asset is assigned at all. Changing `asset` re-arms readiness and
instantiates anew, so a `ready()` obtained after the change resolves against the new content.
A `pc-model` outside a `pc-app`, or referencing an unknown asset id, warns and never becomes
ready.

The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
intersects the model's geometry, exactly as for `<pc-entity>` — a hit on a content node that no
`pc-node` fronts resolves to this element.

**elementSummary** The `<pc-model>` element instantiates a 3D model from a container asset
(typically a GLB) beneath an entity of its own, so the element's transform and tags place the
instance in the scene. Its `<pc-node>` children override what the asset authored. Place it in the
`<pc-scene>`, or nest it under a `<pc-entity>`, another `<pc-model>` or a `<pc-node>`.

**attribute** enabled - The enabled state of the model.

**attribute** name - The name of the model.

**attribute** position - The position of the model.

**attribute** rotation - The rotation of the model.

**attribute** scale - The scale of the model.

**attribute** tags - The tags of the model.

**attribute** onpointerover - Script to run when the pointer moves onto the model, or onto
an entity below it.

**attribute** onpointerenter - Script to run when the pointer moves onto the model or an
entity below it, having been over none of them.

**attribute** onpointermove - Script to run when the pointer moves over the model.

**attribute** onpointerdown - Script to run when a pointer button is pressed over the
model.

**attribute** onpointerup - Script to run when a pointer button is released over the model.

**attribute** onpointercancel - Script to run when the browser cancels a press that began
over the model, for example because a touch became a scroll.

**attribute** onpointerout - Script to run when the pointer moves off the model, or off an
entity below it.

**attribute** onpointerleave - Script to run when the pointer moves off the model and every
entity below it.

**attribute** onclick - Script to run when the model is clicked: a primary pointer button
pressed and then released over it.

**fires** pointerover - Fired when the pointer moves onto the model. Bubbles;
`relatedTarget` is the element the pointer came from, which is `<pc-app>` when it came from the
background.

**fires** pointerenter - Fired when the pointer moves onto the model or an entity
below it, having been over none of them. Does not bubble.

**fires** pointermove - Fired when the pointer moves over the model.

**fires** pointerdown - Fired when a pointer button is pressed over the model.

**fires** pointerup - Fired when a pointer button is released over the model.

**fires** pointercancel - Fired on the model a press began over when the browser
cancels that press, for example because a touch became a scroll. No click follows.

**fires** pointerout - Fired when the pointer moves off the model. Bubbles;
`relatedTarget` is the element the pointer went to, which is `<pc-app>` when it went to the
background.

**fires** pointerleave - Fired when the pointer moves off the model and every entity
below it. Does not bubble.

**fires** click - Fired when a primary pointer button is pressed and then released
over the model. A press and release that picked different elements fires on their nearest common
ancestor instead, as in the DOM. `detail` carries the click count, so a double click arrives as a
click whose `detail` is 2.

**fires** load - Fired each time a container asset finishes instantiating, including
re-instantiation after `asset` changes. Does not bubble — listen on this element, or use a
capture-phase listener on an ancestor.

**fires** error - Fired when the container asset fails to load, with the engine's
error in `message`. Does not bubble. The element still becomes ready — readiness means the load
settled, not that it succeeded.

## Accessors

### asset

```ts
get asset(): string
set asset(value: string)
```

Gets the id of the `pc-asset` to use for the model.

### contentEntity

```ts
get contentEntity(): Entity | null
```

The root entity of the instantiated model content, parented beneath the host entity.
`null` until the container asset has loaded and been instantiated, after a failed load,
and again once the element has been removed from the document.

## Methods

### _onBuilt

```ts
protected _onBuilt(): void
```

Starts (or restarts) the content load once the host has been parented. Readiness is not
announced here — it tracks the content settling, not the host entering the scene graph.

### _onEntityDestroy

```ts
protected _onEntityDestroy(entity: Entity): void
```

Extends the owner reset for the content: the engine's destroy cascade has already taken
the content root down with the host subtree, so only the reference and the in-flight load
are dropped here. The next build re-creates the host and re-instantiates the content.

**Parameters**

- `entity` (`Entity`): The host entity that was destroyed.

### hierarchy

```ts
hierarchy(): HierarchyNode | null
```

Returns a snapshot of the instantiated node tree, or `null` while there is none (the
container asset has not loaded, or the element has left the document). One call grounds a
session — a browser console, a test, an agent — in the vocabulary `pc-node` binding
resolves against: the instantiated names ([HierarchyNode.name](https://api.playcanvas.com/web-components/types/HierarchyNode.md#name)), paths, match
indices, attached component types and the material assignments of render components
([HierarchyNode.materials](https://api.playcanvas.com/web-components/types/HierarchyNode.md#materials)). `String(...)` of the result, or of any node in it,
is the printable form.

The snapshot is plain data, computed afresh each call: it does not follow later changes
to the hierarchy, and mutating it changes nothing. It covers the instantiated content
only — the host entity the element fronts is not part of the asset's node tree.

**Returns** [`HierarchyNode`](https://api.playcanvas.com/web-components/types/HierarchyNode.md) `| null`: The root of the instantiated node tree, or `null`.

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

- `protected _appElement: AppElement | null = null`
- `protected _built: boolean = false`
- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `get entity(): Entity | null`
- `get name(): string` · `set name(value: string)`
- `get position(): Vec3` · `set position(value: Vec3)`
- `get rotation(): Vec3` · `set rotation(value: Vec3)`
- `get scale(): Vec3` · `set scale(value: Vec3)`
- `get tags(): string[]` · `set tags(value: string[])`
- `protected _onReady(): void`
- `protected _registerEntity(entity: Entity): void`
- `protected _resetReady(): void`
- `protected _unregisterEntity(entity: Entity): void`
- `ready(): Promise<ModelElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/NodeElement.md

# NodeElement

Class · extends [`EntityBaseElement`](https://api.playcanvas.com/web-components/classes/EntityBaseElement.md) · category: Entities

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/node.ts#L233

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

A `pc-node` is an override element: where `pc-entity` creates an entity, `pc-node` binds to a
node a `pc-model` loaded and declares overrides against the authored asset — components to
add, properties to change, content to attach. Attributes present apply as overrides; attributes
absent leave authored values untouched, and removing an attribute (or assigning `null` to the
matching property) restores the authored value.

`name` selects among the host model's nodes (first match in depth-first order), nesting a
`pc-node` inside another scopes the search to that subtree, and `index` picks among identically
named matches. When `name` matches more than one node and no `index` is given, the element
warns and binds nothing.

The element becomes ready once bound, and never while unresolved — a missing or ambiguous
name warns and records the failure in `state`, readiness stays unresolved, and descendants
wait with it.

The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
is over the bound node's geometry, exactly as for `<pc-entity>`. Like every DOM event they
propagate through the element tree, not through the model's node hierarchy: a hit below the
bound node reaches this element when no nearer `pc-node` fronts it, or when the `pc-node` that
does is nested inside this one.

**elementSummary** The `<pc-node>` element binds to a node inside the hierarchy a `<pc-model>`
instantiated and declares overrides against it: a transform, an enabled state, tags, components
to add, or content to attach. Its `name` is a lookup, never a rename. Must be a descendant of
`<pc-model>`.

**attribute** name - The name of the node to bind, resolved within the nearest ancestor
`pc-model` (or `pc-node`) once it has instantiated.

**attribute** index - Which match to bind when `name` matches more than one node,
0-based in depth-first order. Optional for a unique match; required for an ambiguous one.

**attribute** enabled - Overrides the node's enabled state.

**attribute** position - Overrides the node's local position, as an "x y z" triple.

**attribute** rotation - Overrides the node's local rotation (Euler angles), as an
"x y z" triple.

**attribute** scale - Overrides the node's local scale, as an "x y z" triple.

**attribute** tags - Overrides the node's tags, separated by spaces or commas.

**attribute** material-overrides - Overrides material assignments on the bound node's
render component, as a JSON object from selector to `pc-material` id — for example
`{"name:CarPaint": "candy-red", "index:7": "smoked-glass"}`. A `name:X` key selects every mesh
instance whose baseline material is named `X`; an `index:N` key selects mesh instance `N` and
wins over a name rule for the same instance. Assignments no rule matches keep their baseline
materials, and removing the attribute restores all of them. Use `pc-model.hierarchy()` to
discover the names and indices a node offers.

**attribute** onpointerover - Script to run when the pointer moves onto the node, or onto
an entity below it.

**attribute** onpointerenter - Script to run when the pointer moves onto the node or an
entity below it, having been over none of them.

**attribute** onpointermove - Script to run when the pointer moves over the node.

**attribute** onpointerdown - Script to run when a pointer button is pressed over the node.

**attribute** onpointerup - Script to run when a pointer button is released over the node.

**attribute** onpointercancel - Script to run when the browser cancels a press that began
over the node, for example because a touch became a scroll.

**attribute** onpointerout - Script to run when the pointer moves off the node, or off an
entity below it.

**attribute** onpointerleave - Script to run when the pointer moves off the node and every
entity below it.

**attribute** onclick - Script to run when the node is clicked: a primary pointer button
pressed and then released over it.

**fires** pointerover - Fired when the pointer moves onto the node. Bubbles;
`relatedTarget` is the element the pointer came from, which is `<pc-app>` when it came from the
background.

**fires** pointerenter - Fired when the pointer moves onto the node or an entity
below it, having been over none of them. Does not bubble.

**fires** pointermove - Fired when the pointer moves over the node.

**fires** pointerdown - Fired when a pointer button is pressed over the node.

**fires** pointerup - Fired when a pointer button is released over the node.

**fires** pointercancel - Fired on the node a press began over when the browser
cancels that press, for example because a touch became a scroll. No click follows.

**fires** pointerout - Fired when the pointer moves off the node. Bubbles;
`relatedTarget` is the element the pointer went to, which is `<pc-app>` when it went to the
background.

**fires** pointerleave - Fired when the pointer moves off the node and every entity
below it. Does not bubble.

**fires** click - Fired when a primary pointer button is pressed and then released
over the node. A press and release that picked different elements fires on their nearest common
ancestor instead, as in the DOM. `detail` carries the click count, so a double click arrives as a
click whose `detail` is 2.

## Accessors

### enabled

```ts
get enabled(): boolean | null
set enabled(value: boolean | null)
```

Gets the enabled override.

### index

```ts
get index(): number | null
set index(value: number | null)
```

Gets which match to bind.

### materialOverrides

```ts
get materialOverrides(): Readonly<Record<string, string>> | null
set materialOverrides(value: Readonly<Record<string, string>> | null)
```

Gets the material overrides.

### name

```ts
get name(): string
set name(value: string)
```

Gets the name of the node to bind.

### path

```ts
get path(): string | null
```

The path of the bound node below the search root, `/`-separated, or `null` while not
bound.

### position

```ts
get position(): Vec3 | null
set position(value: Vec3 | null)
```

Gets the local position override.

### rotation

```ts
get rotation(): Vec3 | null
set rotation(value: Vec3 | null)
```

Gets the local rotation override.

### scale

```ts
get scale(): Vec3 | null
set scale(value: Vec3 | null)
```

Gets the local scale override.

### state

```ts
get state(): NodeBindingState
```

The binding state: `pending` until the host instantiates and `name` resolves, `bound`
once decorated, `missing`/`ambiguous`/`duplicate` when resolution failed (each also
warns). Useful for asserting a document's bindings programmatically.

### tags

```ts
get tags(): string[] | null
set tags(value: string[] | null)
```

Gets the tags override.

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

- `protected _appElement: AppElement | null = null`
- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get entity(): Entity | null`
- `protected _onReady(): void`
- `protected _registerEntity(entity: Entity): void`
- `protected _resetReady(): void`
- `protected _unregisterEntity(entity: Entity): void`
- `ready(): Promise<NodeElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/AnimClipElement.md

# AnimClipElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/anim-clip.ts#L32

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

A clip declares one named animation on its parent `<pc-anim>`. `name` is both the clip's name
and the track looked up in the clip's source: an explicit `asset` (a `container`, an
`animation` `.glb`, or an `animclip` JSON), or, without one, the container of the `<pc-model>`
enclosing the parent `<pc-anim>`. A source holding a single track supplies it whatever it is
named; in a multi-track source the track named `name` is chosen, falling back to the first
with a warning. The element becomes ready once its resolved track is assigned.

**elementSummary** The `<pc-anim-clip>` element declares one named animation clip on its parent
`<pc-anim>`, taken from the `asset` it names or, without one, from the enclosing `<pc-model>`'s
own animations. Must be a direct child of `<pc-anim>`.

## Accessors

### asset

```ts
get asset(): string
set asset(value: string)
```

Gets the id of the `pc-asset` supplying the clip's track.

### loop

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

Gets whether the clip loops.

### name

```ts
get name(): string
set name(value: string)
```

Gets the name of the clip.

### speed

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

Gets the playback speed of the clip.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<AnimClipElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/AnimComponentElement.md

# AnimComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/anim-component.ts#L58

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

The element drives animation clips over the host entity's hierarchy. Clips come from
`<pc-anim-clip>` children — or, when the element is a direct child of a `<pc-model>` and
declares no clips, every animation of that model's container asset is assigned, named by track
name, in container order. The first clip plays automatically (opt out with `activate="false"`);
switch clips declaratively through the `clip` attribute, or imperatively through [play](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#play)
and [transition](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#transition). Tracks bind to scene nodes by name, so any hierarchy whose node names
match a clip's curves can be animated — a model's skeleton is simply the common case.

The engine reports no clip completion: a non-looping clip holds its last pose silently. Poll
the underlying [AnimComponent](https://api.playcanvas.com/engine/classes/AnimComponent.html) (via [component](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#component)) for playback state beyond what
this element exposes.

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

**elementSummary** The `<pc-anim>` element plays animation clips over its entity's hierarchy, taken
from `<pc-anim-clip>` children or from the enclosing `<pc-model>`'s own animations. The first
clip plays automatically, and the `clip` attribute switches between them. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### activate

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

Gets whether playback starts automatically once a clip is assigned.

### clip

```ts
get clip(): string
set clip(value: string)
```

Gets the name of the active clip.

### clips

```ts
get clips(): string[]
```

Gets the names of the assigned clips.

### component

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

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

### speed

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

Gets the playback speed multiplier applied across all clips.

### transitionTime

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

Gets the cross-fade duration of clip switches made through the `clip` attribute.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { activate: boolean; speed: 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** `{ activate: boolean; speed: number }`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

### pause

```ts
pause(): void
```

Pauses playback, preserving the playhead — [play](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#play) resumes from where it stopped.

### play

```ts
play(name?: string): void
```

Resumes playback, optionally switching to a named clip first (a hard cut). A name that
matches no clip leaves the selection unchanged.

**Parameters**

- `name` (`string`, optional): The name of the clip to play. Resumes the current clip when omitted.

### transition

```ts
transition(name: string, time?: number): void
```

Cross-fades to a named clip and ensures playback is running. A name that matches no clip
leaves the selection unchanged.

**Parameters**

- `name` (`string`): The name of the clip to fade to.
- `time` (`number`, optional): The fade duration in seconds. Defaults to the `transition-time` attribute.

## 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`
- `ready(): Promise<AnimComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/AudioListenerComponentElement.md

# AudioListenerComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/audio-listener-component.ts#L19

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

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

**elementSummary** The `<pc-audio-listener>` element makes its entity the point from which
positional sounds are heard, typically the entity holding the `<pc-camera>`. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### component

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

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

## 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 getInitialComponentData(): {}`
- `protected initComponent(): void`
- `ready(): Promise<AudioListenerComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ButtonComponentElement.md

# ButtonComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/button-component.ts#L30

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

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

**elementSummary** The `<pc-button>` element makes its entity respond to pointer input, tinting or
swapping its image as the pointer hovers, presses and releases it. The entity also needs a
`<pc-element>` with `use-input` set. Must be a child of a `<pc-entity>`, `<pc-model>` or
`<pc-node>`.

## Accessors

### active

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

Gets whether the button is active.

### component

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

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

### fadeDuration

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

Gets the duration over which tint transitions are applied.

### hitPadding

```ts
get hitPadding(): Vec4
set hitPadding(value: Vec4)
```

Gets the padding used to expand the button's hit area.

### hoverSpriteAsset

```ts
get hoverSpriteAsset(): string
set hoverSpriteAsset(value: string)
```

Gets the id of the `pc-asset` sprite shown when the button is hovered.

### hoverSpriteFrame

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

Gets the frame of the hover sprite to show.

### hoverTint

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

Gets the hover tint color.

### image

```ts
get image(): string
set image(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the entity whose image element is used for visual transitions, or empty for
the button's own entity.

### inactiveSpriteAsset

```ts
get inactiveSpriteAsset(): string
set inactiveSpriteAsset(value: string)
```

Gets the id of the `pc-asset` sprite shown when the button is inactive.

### inactiveSpriteFrame

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

Gets the frame of the inactive sprite to show.

### inactiveTint

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

Gets the inactive tint color.

### pressedSpriteAsset

```ts
get pressedSpriteAsset(): string
set pressedSpriteAsset(value: string)
```

Gets the id of the `pc-asset` sprite shown when the button is pressed.

### pressedSpriteFrame

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

Gets the frame of the pressed sprite to show.

### pressedTint

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

Gets the pressed tint color.

### transitionMode

```ts
get transitionMode(): "sprite" | "tint"
set transitionMode(value: "sprite" | "tint")
```

Gets how the button reacts to being hovered/pressed.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, any>
```

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** `Record<string, any>`: 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<ButtonComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/CameraComponentElement.md

# CameraComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/camera-component.ts#L54

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

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

**elementSummary** The `<pc-camera>` element renders the scene from its entity's transform, with
attributes for the projection, field of view, clip planes, clear color and tonemapping. Must be a
child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### arAvailable

```ts
get arAvailable(): boolean
```

Whether immersive AR is available. Independent of [vrAvailable](https://api.playcanvas.com/web-components/classes/CameraComponentElement.md#vravailable): a device can offer
either mode without the other.

### clearColor

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

Gets the clear color of the camera.

### clearColorBuffer

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

Gets the clear color buffer of the camera.

### clearDepth

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

Gets the depth value the depth buffer is cleared to.

### clearDepthBuffer

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

Gets the clear depth buffer of the camera.

### clearStencilBuffer

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

Gets the clear stencil buffer of the camera.

### component

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

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

### cullFaces

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

Gets the cull faces of the camera.

### farClip

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

Gets the far clip distance of the camera.

### flipFaces

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

Gets the flip faces of the camera.

### fov

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

Gets the field of view of the camera.

### frustumCulling

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

Gets the frustum culling of the camera.

### gamma

```ts
get gamma(): "linear" | "srgb"
set gamma(value: "linear" | "srgb")
```

Gets the gamma correction of the camera.

### horizontalFov

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

Gets whether the camera's field of view (fov) is horizontal or vertical.

### nearClip

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

Gets the near clip distance of the camera.

### orthoHeight

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

Gets the orthographic height of the camera.

### priority

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

Gets the priority of the camera.

### projection

```ts
get projection(): "perspective" | "orthographic"
set projection(value: "perspective" | "orthographic")
```

Gets the projection of the camera.

### projectionOffset

```ts
get projectionOffset(): Vec2
set projectionOffset(value: Vec2)
```

Gets the offset of the projection window from the view direction.

### rect

```ts
get rect(): Vec4
set rect(value: Vec4)
```

Gets the rect of the camera.

### sceneColorMap

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

Gets whether the camera renders a copy of the scene's color for its materials to sample,
which refractive materials - such as glTF materials with transmission - need to show what
is behind them.

### scissorRect

```ts
get scissorRect(): Vec4
set scissorRect(value: Vec4)
```

Gets the scissor rect of the camera.

### tonemap

```ts
get tonemap(): "none" | "linear" | "filmic" | "hejl" | "aces" | "aces2" | "neutral"
set tonemap(value: "none" | "linear" | "filmic" | "hejl" | "aces" | "aces2" | "neutral")
```

Gets the tone mapping of the camera.

### vrAvailable

```ts
get vrAvailable(): boolean
```

Whether immersive VR is available. Independent of [arAvailable](https://api.playcanvas.com/web-components/classes/CameraComponentElement.md#aravailable): a device can offer
either mode without the other.

## Methods

### endXr

```ts
endXr(): void
```

Ends the camera's XR mode.

### getInitialComponentData

```ts
protected getInitialComponentData(): { clearColor: Color; clearColorBuffer: boolean; clearDepth: number; clearDepthBuffer: boolean; clearStencilBuffer: boolean; cullFaces: boolean; farClip: number; flipFaces: boolean; fov: number; frustumCulling: boolean; gammaCorrection: 0 | 1; horizontalFov: boolean; nearClip: number; orthoHeight: number; priority: number; projection: number; projectionOffset: Vec2; rect: Vec4; renderSceneColorMap: boolean; scissorRect: Vec4; toneMapping: 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** `{ clearColor: Color; clearColorBuffer: boolean; clearDepth: number; clearDepthBuffer: boolean; clearStencilBuffer: boolean; cullFaces: boolean; farClip: number; flipFaces: boolean; fov: number; frustumCulling: boolean; gammaCorrection: 0 | 1; horizontalFov: boolean; nearClip: number; orthoHeight: number; priority: number; projection: number; projectionOffset: Vec2; rect: Vec4; renderSceneColorMap: boolean; scissorRect: Vec4; toneMapping: number }`: The initial component data.

### startXr

```ts
startXr(type: "immersive-ar" | "immersive-vr", space: "bounded-floor" | "local" | "local-floor" | "unbounded" | "viewer"): void
```

Starts the camera in XR mode.

**Parameters**

- `type` (`"immersive-ar" | "immersive-vr"`): The type of XR mode to start.
- `space` (`"bounded-floor" | "local" | "local-floor" | "unbounded" | "viewer"`): The space to start the camera in.

## 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<CameraComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/CollisionComponentElement.md

# CollisionComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/collision-component.ts#L28

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

For `type="mesh"`, the collision geometry defaults to the host entity's own render component
(its render asset) — a collider matching the visible mesh, which is what a mesh collider on a
glTF node means. The default resolves each time the component applies, so a `pc-node` that
retargets or rebinds picks up the new node's geometry. An entity with no asset-backed render
component warns, and the collider has no shape.

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

**elementSummary** The `<pc-collision>` element gives its entity a collision shape — a box, sphere,
capsule, cone, cylinder or mesh — for the physics simulation to collide against. Pair it with a
`<pc-rigid-body>`. Must be a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### angularOffset

```ts
get angularOffset(): Quat
set angularOffset(value: Quat)
```

Gets the rotation of the collision shape relative to the entity, in local space.

### axis

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

Gets the local axis along which a `capsule`, `cylinder` or `cone` shape is aligned: 0 for X,
1 for Y and 2 for Z.

### component

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

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

### convexHull

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

Gets whether a `mesh` shape is treated as a convex hull rather than a triangle mesh.

### halfExtents

```ts
get halfExtents(): Vec3
set halfExtents(value: Vec3)
```

Gets the half-extents of a `box` shape along its local X, Y and Z axes.

### height

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

Gets the total height of a `capsule`, `cylinder` or `cone` shape, measured tip to tip along
its `axis`.

### linearOffset

```ts
get linearOffset(): Vec3
set linearOffset(value: Vec3)
```

Gets the position of the collision shape relative to the entity, along its local axes.

### radius

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

Gets the radius of a `sphere`, `capsule`, `cylinder` or `cone` shape.

### type

```ts
get type(): "box" | "capsule" | "cone" | "cylinder" | "sphere" | "compound" | "mesh"
set type(value: "box" | "capsule" | "cone" | "cylinder" | "sphere" | "compound" | "mesh")
```

Gets the shape of the collision volume.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { angularOffset: Quat; axis: number; convexHull: boolean; halfExtents: Vec3; height: number; linearOffset: Vec3; radius: number; type: "box" | "capsule" | "cone" | "cylinder" | "sphere" | "compound" | "mesh" }
```

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** `{ angularOffset: Quat; axis: number; convexHull: boolean; halfExtents: Vec3; height: number; linearOffset: Vec3; radius: number; type: "box" | "capsule" | "cone" | "cylinder" | "sphere" | "compound" | "mesh" }`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

## 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`
- `ready(): Promise<CollisionComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ElementComponentElement.md

# ElementComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/element-component.ts#L40

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

Despite the name, this is not a base class or a generic wrapper: it is the engine's 2D UI
component, which gives its host entity a rectangle in a `<pc-screen>` hierarchy that draws
either an image, a line of text or nothing (`type="image"`, `"text"` or `"group"`). The tag
spells the engine component it adds, as every component element does.

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

**elementSummary** The `<pc-element>` element gives its entity a 2D UI rectangle inside a
`<pc-screen>` hierarchy, drawing an image, a line of text or nothing (`type="image"`, `"text"` or
`"group"`). Must be a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### alignment

```ts
get alignment(): Vec2
set alignment(value: Vec2)
```

Gets the horizontal and vertical alignment of the text within the element.

### anchor

```ts
get anchor(): Vec4
set anchor(value: Vec4)
```

Gets the anchor of the element component.

### autoFitHeight

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

Gets whether a text element automatically reduces its font size to fit its height.

### autoFitWidth

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

Gets whether a text element automatically reduces its font size to fit its width.

### autoHeight

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

Gets whether the element component should automatically adjust its height.

### autoWidth

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

Gets whether the element component should automatically adjust its width.

### color

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

Gets the color of the element component.

### component

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

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

### enableMarkup

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

Gets whether the element component should use markup.

### fitMode

```ts
get fitMode(): FitMode
set fitMode(value: FitMode)
```

Gets how the texture or sprite fits the element's rectangle.

### fontAsset

```ts
get fontAsset(): string
set fontAsset(value: string)
```

Gets the id of the `pc-asset` to use for the font.

### fontSize

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

Gets the font size of the element component.

### height

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

Gets the height of the element component.

### justify

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

Gets whether wrapped lines are stretched flush with both edges of the element, which needs
`wrap-lines` and a fixed width.

### lineHeight

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

Gets the line height of the element component.

### margin

```ts
get margin(): Vec4 | null
set margin(value: Vec4 | null)
```

Gets the margin of the element component.

### mask

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

Gets whether the element component is a mask.

### maxFontSize

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

Gets the largest font size a text element may use when auto-fitting.

### maxLines

```ts
get maxLines(): number | null
set maxLines(value: number | null)
```

Gets the maximum number of lines `wrap-lines` wraps the text onto.

### minFontSize

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

Gets the smallest font size a text element may use when auto-fitting.

### opacity

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

Gets the opacity of the element component.

### outlineColor

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

Gets the color of the text outline, which is only drawn when `outline-thickness` is above 0.

### outlineThickness

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

Gets the thickness of the text outline.

### pivot

```ts
get pivot(): Vec2
set pivot(value: Vec2)
```

Gets the pivot of the element component.

### pixelsPerUnit

```ts
get pixelsPerUnit(): number | null
set pixelsPerUnit(value: number | null)
```

Gets the number of pixels per unit used when rendering a sprite.

### shadowColor

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

Gets the color of the text shadow, which is only drawn when `shadow-offset` is not `0 0`.

### shadowOffset

```ts
get shadowOffset(): Vec2
set shadowOffset(value: Vec2)
```

Gets the offset of the text shadow.

### spacing

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

Gets the spacing between the letters of the text.

### spriteAsset

```ts
get spriteAsset(): string
set spriteAsset(value: string)
```

Gets the id of the `pc-asset` to use for the sprite.

### spriteFrame

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

Gets the frame of the sprite to render.

### text

```ts
get text(): string
set text(value: string)
```

Gets the text of the element component.

### textureAsset

```ts
get textureAsset(): string
set textureAsset(value: string)
```

Gets the id of the `pc-asset` to use for the texture.

### type

```ts
get type(): "text" | "image" | "group"
set type(value: "text" | "image" | "group")
```

Gets the type of the element component.

### useInput

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

Gets whether the element component accepts input events.

### width

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

Gets the width of the element component.

### wrapLines

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

Gets whether the element component should wrap lines.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, any>
```

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** `Record<string, any>`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

## 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`
- `ready(): Promise<ElementComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/GSplatComponentElement.md

# GSplatComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/gsplat-component.ts#L22

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

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

**elementSummary** The `<pc-gsplat>` element renders the 3D Gaussian splats of a `gsplat` asset at
its entity, with attributes for shadow casting and level of detail. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### asset

```ts
get asset(): string
set asset(value: string)
```

Gets the id of the `pc-asset` to use for the splat.

### castShadows

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

Gets whether the splat casts shadows.

### component

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

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

### lodBaseDistance

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

Gets the camera distance of the first LOD transition.

### lodMultiplier

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

Gets the multiplier between successive LOD transition distances.

### lodRangeMax

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

Gets the maximum allowed LOD index.

### lodRangeMin

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

Gets the minimum allowed LOD index.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { asset: Asset<string> | null | undefined; castShadows: boolean; lodBaseDistance: number; lodMultiplier: number; lodRangeMax: number; lodRangeMin: 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** `{ asset: Asset<string> | null | undefined; castShadows: boolean; lodBaseDistance: number; lodMultiplier: number; lodRangeMax: number; lodRangeMin: 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<GSplatComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/JointComponentElement.md

# JointComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/joint-component.ts#L55

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

The entity holding the joint is not itself constrained. Its world transform defines the joint
frame — the anchor point and axes the constraint operates about — with the local X axis as the
primary axis: a hinge rotates about it, a slider translates along it and a ball joint twists
about it. The constrained bodies are referenced by `entity-a` and `entity-b`, both of which need
a rigid body component; leaving `entity-b` empty constrains `entity-a` to a fixed point in world
space. A reference can name any entity-fronting element — `<pc-entity>`, `<pc-model>` or
`<pc-node>`, so a ragdoll can join a model's own skeleton nodes by name — and a name resolves
against the nearest enclosing entity first, then outward through the entity hierarchy, then the
document, while a `#` selector resolves document-wide. A `<template>` prefab with one
entity-fronting root can therefore wire its joints by name and stay self-contained when cloned.
The underlying engine component is in alpha, so its API may change.

**elementSummary** The `<pc-joint>` element constrains two rigid bodies to each other — a hinged
door, a swinging chain, a sliding drawer. Its entity's transform is the joint frame, and
`entity-a` and `entity-b` name the bodies. Must be a child of a `<pc-entity>`, `<pc-model>` or
`<pc-node>`.

**fires** break - Fired when the impulse on the joint exceeds `break-impulse` and the
constraint breaks. A broken joint no longer constrains its bodies; calling `refreshFrames()` on
the underlying component re-attaches it. Bubbles and is composed.

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

## Accessors

### angularDamping

```ts
get angularDamping(): Vec3
set angularDamping(value: Vec3)
```

Gets the spring damping of the joint per angular axis.

### angularEquilibrium

```ts
get angularEquilibrium(): Vec3
set angularEquilibrium(value: Vec3)
```

Gets the rest angle of the joint's angular springs.

### angularLimitsX

```ts
get angularLimitsX(): Vec2
set angularLimitsX(value: Vec2)
```

Gets the rotation limits of the joint about its X axis.

### angularLimitsY

```ts
get angularLimitsY(): Vec2
set angularLimitsY(value: Vec2)
```

Gets the rotation limits of the joint about its Y axis.

### angularLimitsZ

```ts
get angularLimitsZ(): Vec2
set angularLimitsZ(value: Vec2)
```

Gets the rotation limits of the joint about its Z axis.

### angularMotionX

```ts
get angularMotionX(): MotionMode
set angularMotionX(value: MotionMode)
```

Gets how the joint constrains rotation about its X axis.

### angularMotionY

```ts
get angularMotionY(): MotionMode
set angularMotionY(value: MotionMode)
```

Gets how the joint constrains rotation about its Y axis.

### angularMotionZ

```ts
get angularMotionZ(): MotionMode
set angularMotionZ(value: MotionMode)
```

Gets how the joint constrains rotation about its Z axis.

### angularStiffness

```ts
get angularStiffness(): Vec3
set angularStiffness(value: Vec3)
```

Gets the spring stiffness of the joint per angular axis.

### breakImpulse

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

Gets the impulse above which the joint breaks.

### component

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

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

### enableCollision

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

Gets whether collision is enabled between the two constrained bodies.

### enableLimits

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

Gets whether the limits of the joint are enforced.

### entityA

```ts
get entityA(): string
set entityA(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the element providing the first constrained body.

### entityB

```ts
get entityB(): string
set entityB(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the element providing the second constrained body, or empty for the
world-space case.

### limits

```ts
get limits(): Vec2
set limits(value: Vec2)
```

Gets the rotation or travel limits of the joint.

### linearDamping

```ts
get linearDamping(): Vec3
set linearDamping(value: Vec3)
```

Gets the spring damping of the joint per linear axis.

### linearEquilibrium

```ts
get linearEquilibrium(): Vec3
set linearEquilibrium(value: Vec3)
```

Gets the rest point of the joint's linear springs.

### linearLimitsX

```ts
get linearLimitsX(): Vec2
set linearLimitsX(value: Vec2)
```

Gets the translation limits of the joint along its X axis.

### linearLimitsY

```ts
get linearLimitsY(): Vec2
set linearLimitsY(value: Vec2)
```

Gets the translation limits of the joint along its Y axis.

### linearLimitsZ

```ts
get linearLimitsZ(): Vec2
set linearLimitsZ(value: Vec2)
```

Gets the translation limits of the joint along its Z axis.

### linearMotionX

```ts
get linearMotionX(): MotionMode
set linearMotionX(value: MotionMode)
```

Gets how the joint constrains translation along its X axis.

### linearMotionY

```ts
get linearMotionY(): MotionMode
set linearMotionY(value: MotionMode)
```

Gets how the joint constrains translation along its Y axis.

### linearMotionZ

```ts
get linearMotionZ(): MotionMode
set linearMotionZ(value: MotionMode)
```

Gets how the joint constrains translation along its Z axis.

### linearStiffness

```ts
get linearStiffness(): Vec3
set linearStiffness(value: Vec3)
```

Gets the spring stiffness of the joint per linear axis.

### maxMotorForce

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

Gets the maximum torque or force of the joint's motor.

### motorSpeed

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

Gets the target speed of the joint's motor.

### swingLimitY

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

Gets the maximum swing of the joint's primary axis towards the joint frame's Y axis.

### swingLimitZ

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

Gets the maximum swing of the joint's primary axis towards the joint frame's Z axis.

### twistLimit

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

Gets the maximum twist of the joint about its primary axis.

### type

```ts
get type(): JointType
set type(value: JointType)
```

Gets the type of the joint.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { angularDamping: Vec3; angularEquilibrium: Vec3; angularLimitsX: Vec2; angularLimitsY: Vec2; angularLimitsZ: Vec2; angularMotionX: MotionMode; angularMotionY: MotionMode; angularMotionZ: MotionMode; angularStiffness: Vec3; breakImpulse: number; enableCollision: boolean; enableLimits: boolean; entityA: Entity | null; entityB: Entity | null; limits: Vec2; linearDamping: Vec3; linearEquilibrium: Vec3; linearLimitsX: Vec2; linearLimitsY: Vec2; linearLimitsZ: Vec2; linearMotionX: MotionMode; linearMotionY: MotionMode; linearMotionZ: MotionMode; linearStiffness: Vec3; maxMotorForce: number; motorSpeed: number; swingLimitY: number; swingLimitZ: number; twistLimit: number; type: JointType }
```

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** `{ angularDamping: Vec3; angularEquilibrium: Vec3; angularLimitsX: Vec2; angularLimitsY: Vec2; angularLimitsZ: Vec2; angularMotionX: MotionMode; angularMotionY: MotionMode; angularMotionZ: MotionMode; angularStiffness: Vec3; breakImpulse: number; enableCollision: boolean; enableLimits: boolean; entityA: Entity | null; entityB: Entity | null; limits: Vec2; linearDamping: Vec3; linearEquilibrium: Vec3; linearLimitsX: Vec2; linearLimitsY: Vec2; linearLimitsZ: Vec2; linearMotionX: MotionMode; linearMotionY: MotionMode; linearMotionZ: MotionMode; linearStiffness: Vec3; maxMotorForce: number; motorSpeed: number; swingLimitY: number; swingLimitZ: number; twistLimit: number; type: JointType }`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

## 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`
- `ready(): Promise<JointComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/LayoutChildComponentElement.md

# LayoutChildComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/layout-child-component.ts#L21

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

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

**elementSummary** The `<pc-layout-child>` element controls how its entity is sized by the
`<pc-layout-group>` above it, through minimum and maximum sizes and fit proportions. Must be a
child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### component

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

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

### excludeFromLayout

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

Gets whether the element is excluded from the layout.

### fitHeightProportion

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

Gets the proportion of the container's spare height this element should take.

### fitWidthProportion

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

Gets the proportion of the container's spare width this element should take.

### maxHeight

```ts
get maxHeight(): number | null
set maxHeight(value: number | null)
```

Gets the maximum height the element should be laid out with.

### maxWidth

```ts
get maxWidth(): number | null
set maxWidth(value: number | null)
```

Gets the maximum width the element should be laid out with.

### minHeight

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

Gets the minimum height the element should be laid out with.

### minWidth

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

Gets the minimum width the element should be laid out with.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { excludeFromLayout: boolean; fitHeightProportion: number; fitWidthProportion: number; maxHeight: number | null; maxWidth: number | null; minHeight: number; minWidth: 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** `{ excludeFromLayout: boolean; fitHeightProportion: number; fitWidthProportion: number; maxHeight: number | null; maxWidth: number | null; minHeight: number; minWidth: 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<LayoutChildComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/LayoutGroupComponentElement.md

# LayoutGroupComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/layout-group-component.ts#L43

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

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

**elementSummary** The `<pc-layout-group>` element arranges its entity's children in a row or
column, with spacing, padding, alignment and fitting. Must be a child of a `<pc-entity>`,
`<pc-model>` or `<pc-node>`.

## Accessors

### alignment

```ts
get alignment(): Vec2
set alignment(value: Vec2)
```

Gets the alignment of the child elements.

### component

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

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

### heightFitting

```ts
get heightFitting(): "none" | "stretch" | "shrink" | "both"
set heightFitting(value: "none" | "stretch" | "shrink" | "both")
```

Gets the fitting mode along the vertical axis.

### orientation

```ts
get orientation(): "horizontal" | "vertical"
set orientation(value: "horizontal" | "vertical")
```

Gets the orientation of the layout group.

### padding

```ts
get padding(): Vec4
set padding(value: Vec4)
```

Gets the padding around the layout group.

### reverseX

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

Gets whether the order of children is reversed along the horizontal axis.

### reverseY

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

Gets whether the order of children is reversed along the vertical axis.

### spacing

```ts
get spacing(): Vec2
set spacing(value: Vec2)
```

Gets the spacing between child elements.

### widthFitting

```ts
get widthFitting(): "none" | "stretch" | "shrink" | "both"
set widthFitting(value: "none" | "stretch" | "shrink" | "both")
```

Gets the fitting mode along the horizontal axis.

### wrap

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

Gets whether children wrap onto a new line/column when they overflow the group.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { alignment: Vec2; heightFitting: number | undefined; orientation: number | undefined; padding: Vec4; reverseX: boolean; reverseY: boolean; spacing: Vec2; widthFitting: number | undefined; wrap: boolean }
```

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** `{ alignment: Vec2; heightFitting: number | undefined; orientation: number | undefined; padding: Vec4; reverseX: boolean; reverseY: boolean; spacing: Vec2; widthFitting: number | undefined; wrap: boolean }`: 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<LayoutGroupComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/LightComponentElement.md

# LightComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/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>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ParticleSystemComponentElement.md

# ParticleSystemComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/particle-system-component.ts#L88

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

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

**elementSummary** The `<pc-particle-system>` element emits particles from its entity, with
attributes for the emitter's shape, rate, lifetime, textures and blending. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### asset

```ts
get asset(): string
set asset(value: string)
```

Gets the id of the `pc-asset` to use for the model.

### component

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

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

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): {}
```

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** `{}`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

### pause

```ts
pause(): void
```

Pauses the particle system

### play

```ts
play(): void
```

Starts playing the particle system

### reset

```ts
reset(): void
```

Resets the particle system

### stop

```ts
stop(): void
```

Stops the particle system

## 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`
- `ready(): Promise<ParticleSystemComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/RenderComponentElement.md

# RenderComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/render-component.ts#L41

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

This element renders one of the engine's built-in primitives, selected with `type` (defaulting
to `box`). It does not cover the engine's `asset` render type, since there is no way to supply
a render asset here — use `pc-model` for glTF content instead.

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

**elementSummary** The `<pc-render>` element renders one of the engine's built-in primitives at its
entity — box, sphere, capsule, cone, cylinder, plane or torus — shaded by the `<pc-material>`
its `material` attribute names. For glTF content, use `<pc-model>` instead. Must be a child of
a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### castShadows

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

Gets the cast shadows flag of the render component.

### component

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

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

### material

```ts
get material(): string
set material(value: string)
```

Gets the id of the material asset used by the render component.

### receiveShadows

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

Gets the receive shadows flag of the render component.

### shadowCascadeMask

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

Gets which shadow cascades of directional lights the render component casts into, which
needs `cast-shadows`. As a property, it is a bitmask of `SHADOW_CASCADE_0` to
`SHADOW_CASCADE_3` flags.

### type

```ts
get type(): "box" | "capsule" | "cone" | "cylinder" | "plane" | "sphere" | "torus"
set type(value: "box" | "capsule" | "cone" | "cylinder" | "plane" | "sphere" | "torus")
```

Gets the type of the render component.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, unknown>
```

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** `Record<string, unknown>`: 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<RenderComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/RigidBodyComponentElement.md

# RigidBodyComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/rigid-body-component.ts#L23

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

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

**elementSummary** The `<pc-rigid-body>` element hands its entity to the physics simulation, with
attributes for its type, mass, friction and restitution. It needs a sibling `<pc-collision>` for
its shape, and `Ammo` loaded through `<pc-wasm>`. Must be a child of a `<pc-entity>`,
`<pc-model>` or `<pc-node>`.

## Accessors

### angularDamping

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

Gets the rate at which the body loses angular velocity over time, from 0 (none) to 1.

### angularFactor

```ts
get angularFactor(): Vec3
set angularFactor(value: Vec3)
```

Gets the scaling applied to the body's rotation about each axis: 0 locks an axis and 1 leaves
it free.

### component

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

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

### friction

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

Gets the friction applied where the body contacts another, from 0 (slides freely) to 1
(grips).

### gravityScale

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

Gets the multiplier applied to the scene's gravity for this body: 1 falls normally, 0 ignores
gravity and a negative value rises.

### linearDamping

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

Gets the rate at which the body loses linear velocity over time, from 0 (none) to 1.

### linearFactor

```ts
get linearFactor(): Vec3
set linearFactor(value: Vec3)
```

Gets the scaling applied to the body's movement along each axis: 0 locks an axis and 1 leaves
it free.

### mass

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

Gets the mass of the body, which applies to `dynamic` bodies only.

### restitution

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

Gets the bounciness of the body, from 0 (all energy lost in a collision) to 1 (none lost).

### rollingFriction

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

Gets the friction that resists the body rolling across a contact, where `friction` resists it
sliding.

### type

```ts
get type(): "dynamic" | "kinematic" | "static"
set type(value: "dynamic" | "kinematic" | "static")
```

Gets how the body takes part in the simulation: `static`, `dynamic` or `kinematic`.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { angularDamping: number; angularFactor: Vec3; friction: number; gravityScale: number; linearDamping: number; linearFactor: Vec3; mass: number; restitution: number; rollingFriction: number; type: "dynamic" | "kinematic" | "static" }
```

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** `{ angularDamping: number; angularFactor: Vec3; friction: number; gravityScale: number; linearDamping: number; linearFactor: Vec3; mass: number; restitution: number; rollingFriction: number; type: "dynamic" | "kinematic" | "static" }`: 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<RigidBodyComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ScreenComponentElement.md

# ScreenComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/screen-component.ts#L31

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

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

**elementSummary** The `<pc-screen>` element gives its entity a 2D space — in screen space or in the
world — that a hierarchy of `<pc-element>` descendants lays out inside. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### component

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

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

### priority

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

Gets the order in which the screen is drawn relative to other screens in the same layer, from
0 to 127, with higher values drawn on top and receiving input first.

### referenceResolution

```ts
get referenceResolution(): Vec2
set referenceResolution(value: Vec2)
```

Gets the resolution the screen's layout was designed for, as a width and height in pixels.

### resolution

```ts
get resolution(): Vec2
set resolution(value: Vec2)
```

Gets the width and height of the screen in pixels, which a screen-space screen overrides with
the canvas size.

### scaleBlend

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

Gets how the canvas's width and height are weighted against each other.

### scaleMode

```ts
get scaleMode(): "none" | "blend"
set scaleMode(value: "none" | "blend")
```

Gets how the screen scales its contents.

### screenSpace

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

Gets whether the screen renders its `<pc-element>` descendants in screen space rather than in
the world.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { priority: number; referenceResolution: Vec2; resolution: Vec2; scaleBlend: number; scaleMode: string; screenSpace: boolean }
```

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** `{ priority: number; referenceResolution: Vec2; resolution: Vec2; scaleBlend: number; scaleMode: string; screenSpace: boolean }`: 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<ScreenComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ScriptComponentElement.md

# ScriptComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/script-component.ts#L277

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

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

**elementSummary** The `<pc-script>` element holds the `<pc-script-instance>` children that attach
scripts to its entity. Must be a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### component

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

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

## Methods

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

## 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 getInitialComponentData(): {}`
- `ready(): Promise<ScriptComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ScriptInstanceElement.md

# ScriptInstanceElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/script-instance.ts#L50

The ScriptInstanceElement interface provides properties and methods for manipulating
`<pc-script-instance>` elements. The ScriptInstanceElement interface also inherits the properties and
methods of the [AsyncElement](https://api.playcanvas.com/web-components/classes/AsyncElement.md) interface.

Script attributes can be supplied through two channels:

- **Per-property attributes**: any non-reserved attribute on the element maps to the script
  attribute of the same name (kebab-case to camelCase, e.g. `focus-point` → `focusPoint`).
  Values are parsed according to the type of the attribute's current value — initially the
  script's declared default (numbers, booleans, strings, Vec2/3/4, Color, Quat as Euler
  angles) — and the `asset:`/`entity:`/`vec2:`/`vec3:`/`vec4:`/`color:` prefixes may be used
  to be explicit. An `entity:` reference is an entity name — resolved against the nearest
  enclosing entity first, then outward, then the document — or a document-wide `#` selector
  (`entity:#id`); a bare value is always a name, never an element id.
- **The `attributes` JSON attribute**: an object supporting nested structures and attribute
  names that collide with reserved HTML attribute names (e.g. `title`).

When both specify the same attribute, the per-property attribute wins — at creation and
whenever either channel changes at runtime. The element's own `name` and `enabled`
attributes configure the element itself and are not script attributes.

Changing `name` on a live element destroys the old-name script instance and creates the
new-name one, re-applying both attribute channels to it.

The element becomes ready once its script instance has been created by the parent
`<pc-script>` element. A script class registered after the element is waited for, and its
instance created with the element's declared state when it arrives; one still missing once no
script asset is left loading logs a warning.

**elementSummary** The `<pc-script-instance>` element attaches one script class, named by `name`, to
the entity of its parent `<pc-script>`. Its other attributes set script attributes of the same
name, and `attributes` takes a JSON object instead. An `entity:` value is an entity name —
write `entity:#id` for an element id. Must be a direct child of `<pc-script>`.

**fires** scriptattributeschange - Fired when the script's attributes change. The
`detail` carries the new `attributes` object. Bubbles.

**fires** scriptenablechange - Fired when the script's enabled state changes. The
`detail` carries the new `enabled` state. Bubbles.

**fires** scriptnamechange - Fired when the script is renamed on a live element. The
`detail` carries `oldName` and `newName`. Bubbles.

## Accessors

### enabled

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

Gets the enabled state of the script.

### name

```ts
get name(): string
set name(value: string)
```

Gets the name of the script.

### script

```ts
get script(): Script | null
```

Gets the [Script](https://api.playcanvas.com/engine/classes/Script.html) instance created for this element. Returns `null` until the
instance exists — await [whenReady](https://api.playcanvas.com/web-components/functions/whenReady.md) or the element's `ready()` promise before
accessing it.

### scriptAttributes

```ts
get scriptAttributes(): Record<string, any>
set scriptAttributes(value: Record<string, any>)
```

Gets the attributes of the script as an object whose `asset:`, `entity:`, `vec2:`, `vec3:`,
`vec4:` and `color:` prefixed values are resolved when applied — an `entity:` value being
an entity name (nearest enclosing entity first, then outward, then the document) or a
document-wide `#` selector (`entity:#id`), never a bare element id.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<ScriptInstanceElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ScrollbarComponentElement.md

# ScrollbarComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/scrollbar-component.ts#L28

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

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

**elementSummary** The `<pc-scrollbar>` element gives its entity a draggable handle reporting a
position from 0 to 1, which a `<pc-scroll-view>` references to scroll its content. Must be a
child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### component

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

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

### handle

```ts
get handle(): string
set handle(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the entity used as the scrollbar handle.

### handleSize

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

Gets the size of the handle relative to the size of the track.

### orientation

```ts
get orientation(): "horizontal" | "vertical"
set orientation(value: "horizontal" | "vertical")
```

Gets the orientation of the scrollbar.

### value

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

Gets the current position value of the scrollbar.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, any>
```

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** `Record<string, any>`: 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<ScrollbarComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ScrollViewComponentElement.md

# ScrollViewComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/scroll-view-component.ts#L41

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

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

**elementSummary** The `<pc-scroll-view>` element scrolls a larger content entity within a clipped
viewport at its entity, optionally driven by the `<pc-scrollbar>` elements it references. Must be
a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### bounceAmount

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

Gets the bounce amount.

### component

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

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

### content

```ts
get content(): string
set content(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the entity used as the content.

### friction

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

Gets the friction.

### horizontal

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

Gets whether scrolling along the horizontal axis is enabled.

### horizontalScrollbar

```ts
get horizontalScrollbar(): string
set horizontalScrollbar(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the entity containing the horizontal scrollbar.

### horizontalScrollbarVisibility

```ts
get horizontalScrollbarVisibility(): "always" | "when-required"
set horizontalScrollbarVisibility(value: "always" | "when-required")
```

Gets the visibility of the horizontal scrollbar.

### mouseWheelSensitivity

```ts
get mouseWheelSensitivity(): Vec2
set mouseWheelSensitivity(value: Vec2)
```

Gets the mouse wheel sensitivity.

### scrollMode

```ts
get scrollMode(): "clamp" | "bounce" | "infinite"
set scrollMode(value: "clamp" | "bounce" | "infinite")
```

Gets how the scroll view behaves when the content is scrolled beyond its bounds.

### useMouseWheel

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

Gets whether the scroll view responds to mouse wheel events.

### vertical

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

Gets whether scrolling along the vertical axis is enabled.

### verticalScrollbar

```ts
get verticalScrollbar(): string
set verticalScrollbar(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the entity containing the vertical scrollbar.

### verticalScrollbarVisibility

```ts
get verticalScrollbarVisibility(): "always" | "when-required"
set verticalScrollbarVisibility(value: "always" | "when-required")
```

Gets the visibility of the vertical scrollbar.

### viewport

```ts
get viewport(): string
set viewport(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the entity used as the viewport.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, any>
```

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** `Record<string, any>`: 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<ScrollViewComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/SoundComponentElement.md

# SoundComponentElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/sound-component.ts#L21

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

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

**elementSummary** The `<pc-sound>` element holds the `<pc-sound-slot>` children that play sounds at
its entity, along with the positional audio settings they share. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### component

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

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

### distanceModel

```ts
get distanceModel(): "linear" | "exponential" | "inverse"
set distanceModel(value: "linear" | "exponential" | "inverse")
```

Gets which algorithm to use to reduce the volume of the sound as it moves away from the listener.

### maxDistance

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

Gets the maximum distance from the listener at which audio falloff stops.

### pitch

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

Gets the pitch of the sound.

### positional

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

Gets whether the sounds play positionally.

### refDistance

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

Gets the reference distance for reducing volume as the sound source moves further from the listener.

### rollOffFactor

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

Gets the factor used in the falloff equation.

### volume

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

Gets the volume of the sound.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { distanceModel: "linear" | "exponential" | "inverse"; maxDistance: number; pitch: number; positional: boolean; refDistance: number; rollOffFactor: number; volume: 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** `{ distanceModel: "linear" | "exponential" | "inverse"; maxDistance: number; pitch: number; positional: boolean; refDistance: number; rollOffFactor: number; volume: 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<SoundComponentElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/SoundSlotElement.md

# SoundSlotElement

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

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/sound-slot.ts#L19

The SoundSlotElement interface provides properties and methods for manipulating
`<pc-sound-slot>` elements. The SoundSlotElement interface also inherits the properties and
methods of the [AsyncElement](https://api.playcanvas.com/web-components/classes/AsyncElement.md) interface.

**elementSummary** The `<pc-sound-slot>` element declares one named sound on its parent `<pc-sound>`
— its asset, volume, pitch, looping and autoplay. Must be a direct child of `<pc-sound>`.

## Properties

### soundSlot

```ts
soundSlot: SoundSlot | null = null
```

The sound slot.

## Accessors

### asset

```ts
get asset(): string
set asset(value: string)
```

Gets the id of the `pc-asset` to use for the sound slot.

### autoPlay

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

Gets the auto play flag of the sound slot.

### duration

```ts
get duration(): number | null
set duration(value: number | null)
```

Gets the duration of the sound slot.

### loop

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

Gets the loop flag of the sound slot.

### name

```ts
get name(): string
set name(value: string)
```

Gets the name of the sound slot.

### overlap

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

Gets the overlap flag of the sound slot.

### pitch

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

Gets the pitch of the sound slot.

### startTime

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

Gets the start time of the sound slot.

### volume

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

Gets the volume of the sound slot.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<SoundSlotElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/AsyncElement.md

# AsyncElement

Class · extends `HTMLElement` · category: Base Classes

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/async-element.ts#L13

Base class for all PlayCanvas Web Components that initialize asynchronously.

**fires** ready - Fired when the element is fully initialized — once per readiness
cycle, so an element that is torn down and re-initialized (for example by removing and
re-inserting it) fires it again. Bubbles and is composed.

## Accessors

### closestApp

```ts
get closestApp(): AppElement | null
```

The nearest ancestor `<pc-app>` element, or `null` if this element has no `<pc-app>`
ancestor. The search starts at the parent, so an element never resolves to itself.

### closestEntity

```ts
get closestEntity(): EntityBaseElement | null
```

The nearest ancestor element that fronts an entity — `<pc-entity>`, `<pc-model>` or
`<pc-node>` — or `null` if this element has no such ancestor. The search starts at the
parent, so an element never resolves to itself.

## Methods

### _onReady

```ts
protected _onReady(): void
```

Called when the element is fully initialized and ready. Subclasses should call this when
they're ready. Resolves the ready promise and dispatches a bubbling, composed `ready`
event. Signals at most once per readiness cycle: a repeat call before [_resetReady](https://api.playcanvas.com/web-components/classes/AsyncElement.md#_resetready)
has re-armed the promise does nothing.

### _resetReady

```ts
protected _resetReady(): void
```

Returns the ready promise to its pending state. Subclasses should call this when the
resource their readiness announced is torn down (typically from `disconnectedCallback`),
so that a later re-initialization can signal readiness again. Does nothing while the
promise is still pending — an in-flight waiter carries over to the next readiness cycle
rather than being stranded on a promise nothing will ever resolve.

### ready

```ts
ready(): Promise<AsyncElement>
```

Returns a promise that resolves with this element when it's ready. This is the low-level
primitive underlying [whenReady](https://api.playcanvas.com/web-components/functions/whenReady.md), which is the recommended way to wait for elements.

Readiness tracks the element's current lifecycle: once a ready element is torn down (for
example by removing it from the document), this returns a fresh promise that resolves when
the element is next ready. A promise obtained earlier stays resolved — call this again
after re-inserting an element rather than reusing a promise from before its removal.

**Returns** `Promise<`[`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md)`>`: A promise that resolves with this element when it's ready.

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/ComponentElement.md

# ComponentElement

Class · extends [`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md) · category: Base Classes

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/component.ts#L13

Represents a component in the PlayCanvas engine.

## Accessors

### component

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

The PlayCanvas component instance. `null` until the element is ready, and also for an
element that is not a descendant of an entity-fronting element (`<pc-entity>`,
`<pc-model>` or `<pc-node>`) — await [whenReady](https://api.playcanvas.com/web-components/functions/whenReady.md) or the element's `ready()` promise
before accessing it.

### enabled

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

Gets the enabled state of the component.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): {}
```

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** `{}`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<ComponentElement<T>>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/EntityBaseElement.md

# EntityBaseElement

Class · extends [`AsyncElement`](https://api.playcanvas.com/web-components/classes/AsyncElement.md) · category: Base Classes

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/entity-base.ts#L16

The base class for elements that front an engine [Entity](https://api.playcanvas.com/engine/classes/Entity.html): `<pc-entity>` and
`<pc-model>`, which create one, and `<pc-node>`, which binds to one inside a model's
instantiated hierarchy. It carries what all of them need — the `entity` contract, registration
with the owning application (which joins picked scene nodes back to elements by identity,
never by name), and the pointer listener bookkeeping that tells the application when to pick.

## Properties

### _appElement

```ts
protected _appElement: AppElement | null = null
```

The application element this entity is registered with, cached at registration time so the
entity can be unregistered even once this element has left the DOM.

## Accessors

### entity

```ts
get entity(): Entity | null
```

The PlayCanvas entity instance. `null` until the element is ready, and again once the
entity is gone — await [whenReady](https://api.playcanvas.com/web-components/functions/whenReady.md) or the element's `ready()` promise before
accessing it.

## Methods

### _registerEntity

```ts
protected _registerEntity(entity: Entity): void
```

Registers `entity` as this element's backing entity with the owning application, which
joins engine nodes back to elements by identity (never by name).

**Parameters**

- `entity` (`Entity`): The entity to register.

### _unregisterEntity

```ts
protected _unregisterEntity(entity: Entity): void
```

Removes the registration for `entity`.

**Parameters**

- `entity` (`Entity`): The entity to unregister.

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

- `get closestApp(): AppElement | null`

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

- `get closestEntity(): EntityBaseElement | null`

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

- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<EntityBaseElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/classes/EntityOwnerElement.md

# EntityOwnerElement

Class · extends [`EntityBaseElement`](https://api.playcanvas.com/web-components/classes/EntityBaseElement.md) · category: Base Classes

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/entity-owner.ts#L42

The base class for elements that create and own their backing entity: `<pc-entity>` and
`<pc-model>`, whose host entity carries the same authored properties. It carries the cached
property state, entity creation and parenting, and the reset that follows the entity's
destruction. `<pc-node>` sits outside this class: it borrows an entity a model instantiated,
and its properties are nullable overrides rather than owned values.

## Properties

### _built

```ts
protected _built: boolean = false
```

Whether the hierarchy has been built for this entity — set once `_buildHierarchy` has
parented it. Read by subclasses that gate work on the entity being in the scene graph.

## Accessors

### enabled

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

Gets the enabled state of the entity.

### name

```ts
get name(): string
set name(value: string)
```

Gets the name of the entity.

### position

```ts
get position(): Vec3
set position(value: Vec3)
```

Gets the position of the entity.

### rotation

```ts
get rotation(): Vec3
set rotation(value: Vec3)
```

Gets the rotation of the entity.

### scale

```ts
get scale(): Vec3
set scale(value: Vec3)
```

Gets the scale of the entity.

### tags

```ts
get tags(): string[]
set tags(value: string[])
```

Gets the tags of the entity.

## Methods

### _onBuilt

```ts
protected _onBuilt(): void
```

Called by `_buildHierarchy` once the backing entity has been parented — exactly once
per build cycle. The default announces readiness, which is what a parented `<pc-entity>`
means; `<pc-model>` overrides it to start loading content instead, because its readiness
tracks the content settling rather than the host entering the scene graph.

### _onEntityDestroy

```ts
protected _onEntityDestroy(entity: Entity): void
```

Handles the destruction of the backing entity. Resets the element so a later re-insertion
starts clean: `_built` must be cleared alongside `_entity`, or _buildHierarchy would bail
and a re-created entity would never be parented. Readiness is re-armed for the same
reason — with the entity gone, a resolved ready promise would resume its awaiters against
a null `entity`.

**Parameters**

- `entity` (`Entity`): The entity that was destroyed.

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

- `protected _appElement: AppElement | null = null`
- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get entity(): Entity | null`
- `protected _onReady(): void`
- `protected _registerEntity(entity: Entity): void`
- `protected _resetReady(): void`
- `protected _unregisterEntity(entity: Entity): void`
- `ready(): Promise<EntityOwnerElement>`

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/functions/whenReady.md

# whenReady

Function · category: Functions

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/async-element.ts#L114

```ts
whenReady<K extends AsyncElementTagName>(target: K): Promise<HTMLElementTagNameMap[K]>
```

Waits for the first element matching the given tag name to be fully initialized. Note that the
promise never settles if the element cannot finish initializing (for example, a `<pc-script-instance>`
that is not a direct child of `<pc-script>`, or a `<pc-app>` that could not create a graphics
device — listen for its `error` event instead). A component element outside an entity-fronting
element is the exception: it still becomes ready, but its `component` is `null`. Either way, a
misplaced element logs a warning naming the parent it requires.

**Parameters**

- `target` ([`K`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyk)): The tag name of the element to wait for (e.g. `'pc-app'`).

**Returns** `Promise<HTMLElementTagNameMap[`[`K`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyk)`]>`: A promise that resolves with the element once it's ready.

**Example**

```ts
const { app } = await whenReady('pc-app');
```

```ts
whenReady<T extends AsyncElement>(target: T): Promise<T>
```

Waits for the given element to be fully initialized. Note that the promise never settles if
the element cannot finish initializing (for example, an element that is never added to the
document).

**Parameters**

- `target` ([`T`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyt)): The element to wait for.

**Returns** `Promise<`[`T`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyt)`>`: A promise that resolves with the element once it's ready.

**Example**

```ts
const appElement = document.createElement('pc-app');
document.body.appendChild(appElement);
const { app } = await whenReady(appElement);
```

```ts
whenReady<T extends AsyncElement, S extends string>(target: S extends "object" | "audio" | "html" | "script" | "template" | "map" | "input" | "progress" | "select" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "i" | "iframe" | "img" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "section" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "pc-material" ? never : S): Promise<T>
```

Waits for the first element matching the given CSS selector to be fully initialized. Note that
the promise never settles if the element cannot finish initializing (for example, a `<pc-script-instance>`
that is not a direct child of `<pc-script>`, or a `<pc-app>` that could not create a graphics
device — listen for its `error` event instead). A component element outside an entity-fronting
element is the exception: it still becomes ready, but its `component` is `null`. Either way, a
misplaced element logs a warning naming the parent it requires.

**Parameters**

- `target` ([`S`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadys) `extends "object" | "audio" | "html" | "script" | "template" | "map" | "input" | "progress" | "select" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "i" | "iframe" | "img" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "section" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "pc-material" ? never :` [`S`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadys)): A CSS selector matching the element to wait for (e.g. `'#my-app'`).

**Returns** `Promise<`[`T`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyt-1)`>`: A promise that resolves with the element once it's ready.

**Example**

```ts
// In TypeScript, supply the element type when using an arbitrary selector
const { entity } = await whenReady<EntityElement>('pc-entity[name="camera"]');
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/AddressMode.md

# AddressMode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/asset.ts#L35

The addressing modes for a texture asset.

```ts
type AddressMode = "repeat" | "clamp" | "mirror"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/AsyncElementTagName.md

# AsyncElementTagName

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/async-element.ts#L96

A union of the tag names of all elements that initialize asynchronously (i.e. elements whose
classes extend [AsyncElement](https://api.playcanvas.com/web-components/classes/AsyncElement.md)).

```ts
type AsyncElementTagName = { [K in keyof HTMLElementTagNameMap]: HTMLElementTagNameMap[K] extends AsyncElement ? K : never }[keyof HTMLElementTagNameMap]
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/BlendType.md

# BlendType

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L37

The blend modes for a material.

```ts
type BlendType = "none" | "normal" | "additive" | "additive-alpha" | "premultiplied" | "multiplicative" | "multiplicative-2x" | "screen" | "min" | "max" | "subtractive"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/ColorChannel.md

# ColorChannel

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L142

The texture channels a color map can sample.

```ts
type ColorChannel = "r" | "g" | "b" | "a" | "rgb"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/CullMode.md

# CullMode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L69

The face culling modes for a material.

```ts
type CullMode = "none" | "back" | "front" | "front-and-back"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/FitMode.md

# FitMode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/element-component.ts#L15

How an image element fits its texture or sprite into its rectangle: `stretch` fills the rectangle
exactly, `contain` fits within it and `cover` fills it, both preserving the source aspect ratio.

```ts
type FitMode = "stretch" | "contain" | "cover"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/FresnelModel.md

# FresnelModel

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L83

The Fresnel models for a material.

```ts
type FresnelModel = "none" | "schlick"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/HierarchyMaterial.md

# HierarchyMaterial

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/model.ts#L14

One material assignment of a [HierarchyNode](https://api.playcanvas.com/web-components/types/HierarchyNode.md) with a render component: a mesh instance's
position within the component and the runtime name of its current material.

```ts
type HierarchyMaterial = undefined
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/HierarchyNode.md

# HierarchyNode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/model.ts#L33

One node of the tree returned by [ModelElement.hierarchy](https://api.playcanvas.com/web-components/classes/ModelElement.md#hierarchy). A plain-data snapshot —
`JSON.stringify` serializes it — whose `toString()` renders the node's subtree as a printable
tree.

```ts
type HierarchyNode = undefined
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/JointType.md

# JointType

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/joint-component.ts#L14

The constraint types supported by the `<pc-joint>` element.

```ts
type JointType = "fixed" | "ball" | "hinge" | "slider" | "6dof"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/LightShape.md

# LightShape

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/light-component.ts#L44

The light source shapes supported by the `<pc-light>` element: a `punctual` point, or an area
light shaped as a `rect`, `disk` or `sphere`.

```ts
type LightShape = "punctual" | "rect" | "disk" | "sphere"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/MagFilterMode.md

# MagFilterMode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/asset.ts#L66

The magnification filter modes for a texture asset. Magnification has no mip variants - the
engine (and the GPU) only accepts these two.

```ts
type MagFilterMode = "nearest" | "linear"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/MaterialOverrides.md

# MaterialOverrides

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/node.ts#L42

A sparse mapping from selector to `pc-material` id, as carried by the `material-overrides`
attribute and `materialOverrides` property. A `name:X` key selects every mesh instance of the
bound node's render component whose baseline material is named `X`; an `index:N` key selects
mesh instance `N` and wins over a name rule for the same instance.

```ts
type MaterialOverrides = Readonly<Record<string, string>>
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/MinFilterMode.md

# MinFilterMode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/asset.ts#L48

The minification filter modes for a texture asset.

```ts
type MinFilterMode = "nearest" | "linear" | "nearest-mip-nearest" | "linear-mip-nearest" | "nearest-mip-linear" | "linear-mip-linear"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/MotionMode.md

# MotionMode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/components/joint-component.ts#L22

The motion modes for a single joint axis: fully constrained (`locked`), constrained within
limits (`limited`) or unconstrained (`free`).

```ts
type MotionMode = "locked" | "limited" | "free"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/NodeBindingState.md

# NodeBindingState

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/node.ts#L20

The binding states a `<pc-node>` element moves through. `pending` while the host has not yet
instantiated (or no `name` is assigned), `bound` once a node has been resolved and decorated,
`missing`/`ambiguous`/`duplicate` when resolution failed — each accompanied by a warning
naming the cause.

```ts
type NodeBindingState = "pending" | "bound" | "missing" | "ambiguous" | "duplicate"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/OccludeSpecular.md

# OccludeSpecular

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L95

The specular occlusion modes for a material.

```ts
type OccludeSpecular = "none" | "ao" | "gloss-dependent"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/OpacityDither.md

# OpacityDither

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L108

The opacity dithering modes for a material.

```ts
type OpacityDither = "none" | "bayer2" | "bayer4" | "bayer8" | "bayer16" | "bluenoise" | "ignnoise"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/ParallaxMode.md

# ParallaxMode

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L121

How a material's height map offsets the UVs of its other maps: `offset` takes a single tap of
the height map, and `occlusion` marches the view ray through the height field for deeper relief
at the cost of several taps per pixel.

```ts
type ParallaxMode = "offset" | "occlusion"
```

--------------------------------------------------------------------------------

URL: https://api.playcanvas.com/web-components/types/ScalarChannel.md

# ScalarChannel

Type alias · category: Types

Source: https://github.com/playcanvas/web-components/blob/514c3dca7f4cd5725abca9e6b7641352587fe50c/src/material.ts#L151

The texture channels a scalar map can sample.

```ts
type ScalarChannel = "r" | "g" | "b" | "a"
```

--------------------------------------------------------------------------------