The API reference of @playcanvas/web-components 0.28.0: the classes behind the <pc-*> custom elements, and the library's JavaScript API.
The same pages as Markdown, for AI agents: llms-full.txt.
Class · extends AsyncElement · category: Application
The AppElement interface provides properties and methods for manipulating
<pc-app> elements.
The AppElement interface also inherits the properties and methods of the
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.
get alpha(): boolean
set alpha(value: boolean)
Gets whether the frame buffer has an alpha channel.
get antialias(): boolean
set antialias(value: boolean)
Gets whether the frame buffer is anti-aliased.
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 or the element's ready()
promise before accessing it.
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.
get backend(): "webgpu" | "webgl2" | "null"
set backend(value: "webgpu" | "webgl2" | "null")
Gets the graphics backend.
get depthBuffer(): boolean
set depthBuffer(value: boolean)
Gets whether the frame buffer has a depth buffer.
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.
get loadingBar(): boolean
set loadingBar(value: boolean)
Gets whether the application shows its built-in loading bar while it boots and preloads its assets.
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.
get maxPixelRatio(): number
set maxPixelRatio(value: number)
Gets the cap on the pixel ratio the application renders at.
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.
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.
get stencilBuffer(): boolean
set stencilBuffer(value: boolean)
Gets whether the frame buffer has a stencil buffer.
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.
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.
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 | null: The element fronting the entity, or null.
get closestApp(): AppElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<AppElement>get closestEntity(): EntityBaseElement | nullClass · extends AsyncElement · category: Application
The SceneElement interface provides properties and methods for manipulating
<pc-scene> elements.
The SceneElement interface also inherits the properties and methods of the
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>.
get exposure(): number
set exposure(value: number)
Gets the exposure of the scene.
get fog(): "none" | "linear" | "exp" | "exp2"
set fog(value: "none" | "linear" | "exp" | "exp2")
Gets the fog type of the scene.
get fogColor(): Color
set fogColor(value: Color)
Gets the fog color of the scene.
get fogDensity(): number
set fogDensity(value: number)
Gets the fog density of the scene.
get fogEnd(): number
set fogEnd(value: number)
Gets the fog end distance of the scene.
get fogStart(): number
set fogStart(value: number)
Gets the fog start distance of the scene.
get gravity(): Vec3
set gravity(value: Vec3)
Gets the gravity of the scene.
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.
get gsplatSplatBudget(): number
set gsplatSplatBudget(value: number)
Gets the number of splats rendered across the scene.
get gsplatSplatBudgetMode(): "target" | "limit"
set gsplatSplatBudgetMode(value: "target" | "limit")
Gets how the splat budget is used for streamed Gaussian splats.
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.
get gsplatUseFog(): boolean
set gsplatUseFog(value: boolean)
Gets whether the scene fog applies to Gaussian splats.
get gsplatUseTonemap(): boolean
set gsplatUseTonemap(value: boolean)
Gets whether the camera's tonemapping and the scene's exposure apply to Gaussian splats.
get lightingMaxLights(): number
set lightingMaxLights(value: number)
Gets the maximum number of lights clustered lighting uses in a frame.
get scene(): Scene | null
The PlayCanvas scene instance. null until the containing application has been created —
await whenReady or the element's ready() promise before accessing it.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<SceneElement>Class · extends AsyncElement · category: Application
The SkyElement interface provides properties and methods for manipulating
<pc-sky> elements. The SkyElement interface also inherits the properties and
methods of the 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>.
get asset(): string
set asset(value: string)
Gets the id of the pc-asset to use for the skybox.
get center(): Vec3
set center(value: Vec3)
Gets the center of the skybox.
get intensity(): number
set intensity(value: number)
Gets the intensity of the skybox.
get lighting(): boolean
set lighting(value: boolean)
Gets whether the skybox is used as a light source.
get mipLevel(): number
set mipLevel(value: number)
Gets the mip level of the skybox.
get rotation(): Vec3
set rotation(value: Vec3)
Gets the Euler rotation of the skybox.
get scale(): Vec3
set scale(value: Vec3)
Gets the scale of the skybox.
get type(): "none" | "box" | "infinite" | "dome"
set type(value: "none" | "box" | "infinite" | "dome")
Gets the type of the skybox.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<SkyElement>Class · extends AsyncElement · category: Resources
The AssetElement interface provides properties and methods for manipulating
<pc-asset> elements.
The AssetElement interface also inherits the properties and methods of the
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.
asset: Asset<string> | null = null
The asset that is loaded. Available once the element is ready — await
whenReady or the element's ready() promise before accessing it.
get addressU(): AddressMode | null
set addressU(value: AddressMode | null)
Gets the texture's horizontal (U) address mode.
get addressV(): AddressMode | null
set addressV(value: AddressMode | null)
Gets the texture's vertical (V) address mode.
get anisotropy(): number | null
set anisotropy(value: number | null)
Gets the texture's maximum anisotropic filtering level.
get flipY(): boolean | null
set flipY(value: boolean | null)
Gets whether the texture's image data is flipped vertically at upload.
get lazy(): boolean
set lazy(value: boolean)
Gets whether the asset should be loaded lazily.
get magFilter(): MagFilterMode | null
set magFilter(value: MagFilterMode | null)
Gets the texture's magnification filter.
get minFilter(): MinFilterMode | null
set minFilter(value: MinFilterMode | null)
Gets the texture's minification filter.
get mipmaps(): boolean | null
set mipmaps(value: boolean | null)
Gets whether the texture generates and uses mipmaps.
get srgb(): boolean | null
set srgb(value: boolean | null)
Gets whether the texture holds sRGB (gamma-encoded) color data.
static get(id: string): Asset<string> | null | undefined
Returns the Asset 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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<AssetElement>Class · extends HTMLElement · category: Resources
The MaterialElement interface provides properties and methods for manipulating
<pc-material> elements.
The MaterialElement interface also inherits the properties and methods of the
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.
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.
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.
get alphaTest(): number
set alphaTest(value: number)
Gets the alpha test reference value.
get alphaToCoverage(): boolean
set alphaToCoverage(value: boolean)
Gets whether to use alpha to coverage.
get aoIntensity(): number
set aoIntensity(value: number)
Gets the strength of the ambient occlusion map.
get aoMap(): string
set aoMap(value: string)
Gets the id of the pc-asset used as the ambient occlusion map.
get aoMapChannel(): ScalarChannel
set aoMapChannel(value: ScalarChannel)
Gets the color channel of the ambient occlusion map to sample.
get aoMapOffset(): Vec2
set aoMapOffset(value: Vec2)
Gets the 2D offset of the ambient occlusion map.
get aoMapRotation(): number
set aoMapRotation(value: number)
Gets the 2D rotation of the ambient occlusion map.
get aoMapTiling(): Vec2
set aoMapTiling(value: Vec2)
Gets the 2D tiling of the ambient occlusion map.
get aoMapUv(): number
set aoMapUv(value: number)
Gets the UV channel the ambient occlusion map samples.
get blendType(): BlendType
set blendType(value: BlendType)
Gets how the material is blended with the scene behind it.
get bumpiness(): number
set bumpiness(value: number)
Gets the strength of the normal map.
get cull(): CullMode
set cull(value: CullMode)
Gets which faces of a mesh are culled.
get depthBias(): number
set depthBias(value: number)
Gets the offset applied to the depth of a fragment.
get depthTest(): boolean
set depthTest(value: boolean)
Gets whether fragments are tested against the depth buffer.
get depthWrite(): boolean
set depthWrite(value: boolean)
Gets whether fragments write to the depth buffer.
get diffuse(): Color
set diffuse(value: Color)
Gets the diffuse color of the material.
get diffuseMap(): string
set diffuseMap(value: string)
Gets the id of the pc-asset used as the diffuse map.
get diffuseMapChannel(): ColorChannel
set diffuseMapChannel(value: ColorChannel)
Gets the color channels of the diffuse map to sample.
get diffuseMapOffset(): Vec2
set diffuseMapOffset(value: Vec2)
Gets the 2D offset of the diffuse map.
get diffuseMapRotation(): number
set diffuseMapRotation(value: number)
Gets the 2D rotation of the diffuse map.
get diffuseMapTiling(): Vec2
set diffuseMapTiling(value: Vec2)
Gets the 2D tiling of the diffuse map.
get diffuseMapUv(): number
set diffuseMapUv(value: number)
Gets the UV channel the diffuse map samples.
get emissive(): Color
set emissive(value: Color)
Gets the emissive color of the material.
get emissiveIntensity(): number
set emissiveIntensity(value: number)
Gets the multiplier applied to the emissive color and map.
get emissiveMap(): string
set emissiveMap(value: string)
Gets the id of the pc-asset used as the emissive map.
get emissiveMapChannel(): ColorChannel
set emissiveMapChannel(value: ColorChannel)
Gets the color channels of the emissive map to sample.
get emissiveMapOffset(): Vec2
set emissiveMapOffset(value: Vec2)
Gets the 2D offset of the emissive map.
get emissiveMapRotation(): number
set emissiveMapRotation(value: number)
Gets the 2D rotation of the emissive map.
get emissiveMapTiling(): Vec2
set emissiveMapTiling(value: Vec2)
Gets the 2D tiling of the emissive map.
get emissiveMapUv(): number
set emissiveMapUv(value: number)
Gets the UV channel the emissive map samples.
get enableGGXSpecular(): boolean
set enableGGXSpecular(value: boolean)
Gets whether to use the GGX specular model.
get flatShading(): boolean
set flatShading(value: boolean)
Gets whether the material is shaded with the geometric normal of each triangle.
get fresnelModel(): FresnelModel
set fresnelModel(value: FresnelModel)
Gets the Fresnel model used for specular reflections at grazing angles.
get gloss(): number
set gloss(value: number)
Gets the glossiness of the material.
get glossInvert(): boolean
set glossInvert(value: boolean)
Gets whether the gloss value and map are inverted.
get glossMap(): string
set glossMap(value: string)
Gets the id of the pc-asset used as the gloss map.
get glossMapChannel(): ScalarChannel
set glossMapChannel(value: ScalarChannel)
Gets the color channel of the gloss map to sample.
get glossMapOffset(): Vec2
set glossMapOffset(value: Vec2)
Gets the 2D offset of the gloss map.
get glossMapRotation(): number
set glossMapRotation(value: number)
Gets the 2D rotation of the gloss map.
get glossMapTiling(): Vec2
set glossMapTiling(value: Vec2)
Gets the 2D tiling of the gloss map.
get glossMapUv(): number
set glossMapUv(value: number)
Gets the UV channel the gloss map samples.
get heightMap(): string
set heightMap(value: string)
Gets the id of the pc-asset used as the height map.
get heightMapBase(): number
set heightMapBase(value: number)
Gets the height map value that sits at the level of the geometry.
get heightMapChannel(): ScalarChannel
set heightMapChannel(value: ScalarChannel)
Gets the color channel of the height map to sample.
get heightMapFactor(): number
set heightMapFactor(value: number)
Gets the strength of the parallax effect driven by the height map.
get heightMapOffset(): Vec2
set heightMapOffset(value: Vec2)
Gets the 2D offset of the height map.
get heightMapRotation(): number
set heightMapRotation(value: number)
Gets the 2D rotation of the height map.
get heightMapTiling(): Vec2
set heightMapTiling(value: Vec2)
Gets the 2D tiling of the height map.
get heightMapUv(): number
set heightMapUv(value: number)
Gets the UV channel the height map samples.
get metalness(): number
set metalness(value: number)
Gets how metallic the surface is.
get metalnessMap(): string
set metalnessMap(value: string)
Gets the id of the pc-asset used as the metalness map.
get metalnessMapChannel(): ScalarChannel
set metalnessMapChannel(value: ScalarChannel)
Gets the color channel of the metalness map to sample.
get metalnessMapOffset(): Vec2
set metalnessMapOffset(value: Vec2)
Gets the 2D offset of the metalness map.
get metalnessMapRotation(): number
set metalnessMapRotation(value: number)
Gets the 2D rotation of the metalness map.
get metalnessMapTiling(): Vec2
set metalnessMapTiling(value: Vec2)
Gets the 2D tiling of the metalness map.
get metalnessMapUv(): number
set metalnessMapUv(value: number)
Gets the UV channel the metalness map samples.
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.
get normalMap(): string
set normalMap(value: string)
Gets the id of the pc-asset used as the normal map.
get normalMapOffset(): Vec2
set normalMapOffset(value: Vec2)
Gets the 2D offset of the normal map.
get normalMapRotation(): number
set normalMapRotation(value: number)
Gets the 2D rotation of the normal map.
get normalMapTiling(): Vec2
set normalMapTiling(value: Vec2)
Gets the 2D tiling of the normal map.
get normalMapUv(): number
set normalMapUv(value: number)
Gets the UV channel the normal map samples.
get occludeDirect(): boolean
set occludeDirect(value: boolean)
Gets whether ambient occlusion also attenuates direct lighting.
get occludeSpecular(): OccludeSpecular
set occludeSpecular(value: OccludeSpecular)
Gets how specular reflections are occluded.
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.
get opacityDither(): OpacityDither
set opacityDither(value: OpacityDither)
Gets the dithering used to render opacity.
get opacityFadesSpecular(): boolean
set opacityFadesSpecular(value: boolean)
Gets whether specular highlights fade out as the material becomes transparent.
get opacityMap(): string
set opacityMap(value: string)
Gets the id of the pc-asset used as the opacity map.
get opacityMapChannel(): ScalarChannel
set opacityMapChannel(value: ScalarChannel)
Gets the color channel of the opacity map to sample.
get opacityMapOffset(): Vec2
set opacityMapOffset(value: Vec2)
Gets the 2D offset of the opacity map.
get opacityMapRotation(): number
set opacityMapRotation(value: number)
Gets the 2D rotation of the opacity map.
get opacityMapTiling(): Vec2
set opacityMapTiling(value: Vec2)
Gets the 2D tiling of the opacity map.
get opacityMapUv(): number
set opacityMapUv(value: number)
Gets the UV channel the opacity map samples.
get parallaxMode(): ParallaxMode
set parallaxMode(value: ParallaxMode)
Gets how the height map offsets the UVs of the other maps.
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.
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.
get roughness(): number
set roughness(value: number)
Gets the roughness of the material.
get roughnessMap(): string
set roughnessMap(value: string)
Gets the id of the pc-asset used as the roughness map.
get slopeDepthBias(): number
set slopeDepthBias(value: number)
Gets the depth offset applied in proportion to a surface's slope.
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.
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.
get twoSidedLighting(): boolean
set twoSidedLighting(value: boolean)
Gets whether back faces are lit as though their normals were flipped.
get useFog(): boolean
set useFog(value: boolean)
Gets whether the material is affected by scene fog.
get useLighting(): boolean
set useLighting(value: boolean)
Gets whether the material is affected by scene lights.
get useMetalness(): boolean
set useMetalness(value: boolean)
Gets whether to use the metalness workflow.
get useMetalnessSpecularColor(): boolean
set useMetalnessSpecularColor(value: boolean)
Gets whether the specular color tints reflections while the metalness workflow is in use.
get useSkybox(): boolean
set useSkybox(value: boolean)
Gets whether the material is lit by the scene's skybox.
get useTonemap(): boolean
set useTonemap(value: boolean)
Gets whether the camera's tone mapping is applied to the material.
static get(id: string): StandardMaterial | null | undefined
Returns the StandardMaterial 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.
Class · extends AsyncElement · category: Resources
The WasmElement interface provides properties and methods for manipulating
<pc-wasm>
elements. The WasmElement interface also inherits the properties and methods of the
AsyncElement 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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<WasmElement>Class · extends EntityOwnerElement · category: Entities
The EntityElement interface provides properties and methods for manipulating
<pc-entity> elements.
The EntityElement interface also inherits the properties and methods of the
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.
protected _appElement: AppElement | null = nullprotected _built: boolean = falseget closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)get entity(): Entity | nullget 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(): voidprotected _onEntityDestroy(entity: Entity): voidprotected _onReady(): voidprotected _registerEntity(entity: Entity): voidprotected _resetReady(): voidprotected _unregisterEntity(entity: Entity): voidready(): Promise<EntityElement>Class · extends EntityOwnerElement · category: Entities
The ModelElement interface provides properties and methods for manipulating
<pc-model> elements.
The ModelElement interface also inherits the properties and methods of the
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.
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.
get asset(): string
set asset(value: string)
Gets the id of the pc-asset to use for the model.
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.
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.
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(): 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), paths, match
indices, attached component types and the material assignments of render components
(HierarchyNode.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 | null: The root of the instantiated node tree, or null.
protected _appElement: AppElement | null = nullprotected _built: boolean = falseget closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)get entity(): Entity | nullget 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(): voidprotected _registerEntity(entity: Entity): voidprotected _resetReady(): voidprotected _unregisterEntity(entity: Entity): voidready(): Promise<ModelElement>Class · extends EntityBaseElement · category: Entities
The NodeElement interface provides properties and methods for manipulating
<pc-node>
elements. The NodeElement interface also inherits the properties and methods of the
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.
get enabled(): boolean | null
set enabled(value: boolean | null)
Gets the enabled override.
get index(): number | null
set index(value: number | null)
Gets which match to bind.
get materialOverrides(): Readonly<Record<string, string>> | null
set materialOverrides(value: Readonly<Record<string, string>> | null)
Gets the material overrides.
get name(): string
set name(value: string)
Gets the name of the node to bind.
get path(): string | null
The path of the bound node below the search root, /-separated, or null while not
bound.
get position(): Vec3 | null
set position(value: Vec3 | null)
Gets the local position override.
get rotation(): Vec3 | null
set rotation(value: Vec3 | null)
Gets the local rotation override.
get scale(): Vec3 | null
set scale(value: Vec3 | null)
Gets the local scale override.
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.
get tags(): string[] | null
set tags(value: string[] | null)
Gets the tags override.
protected _appElement: AppElement | null = nullget closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget entity(): Entity | nullprotected _onReady(): voidprotected _registerEntity(entity: Entity): voidprotected _resetReady(): voidprotected _unregisterEntity(entity: Entity): voidready(): Promise<NodeElement>Class · extends AsyncElement · category: Components
The AnimClipElement interface provides properties and methods for manipulating
<pc-anim-clip>
elements. The AnimClipElement interface also inherits the properties and methods of the
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>.
get asset(): string
set asset(value: string)
Gets the id of the pc-asset supplying the clip's track.
get loop(): boolean
set loop(value: boolean)
Gets whether the clip loops.
get name(): string
set name(value: string)
Gets the name of the clip.
get speed(): number
set speed(value: number)
Gets the playback speed of the clip.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<AnimClipElement>Class · extends ComponentElement<AnimComponent> · category: Components
The AnimComponentElement interface provides properties and methods for manipulating
<pc-anim> elements.
The AnimComponentElement interface also inherits the properties and methods of the
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
and 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 (via component) for playback state beyond what this element exposes.
Engine component: AnimComponent (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>.
get activate(): boolean
set activate(value: boolean)
Gets whether playback starts automatically once a clip is assigned.
get clip(): string
set clip(value: string)
Gets the name of the active clip.
get clips(): string[]
Gets the names of the assigned clips.
get component(): AnimComponent | null
Gets the underlying PlayCanvas anim component. null until the element is
ready — see ComponentElement.component.
get speed(): number
set speed(value: number)
Gets the playback speed multiplier applied across all clips.
get transitionTime(): number
set transitionTime(value: number)
Gets the cross-fade duration of clip switches made through the clip attribute.
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.
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(): void
Pauses playback, preserving the playhead — play resumes from where it stopped.
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(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.get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidready(): Promise<AnimComponentElement>Class · extends ComponentElement<AudioListenerComponent> · category: Components
The AudioListenerComponentElement interface provides properties and methods for manipulating
<pc-audio-listener> elements.
The AudioListenerComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: AudioListenerComponent (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>.
get component(): AudioListenerComponent | null
Gets the underlying PlayCanvas audio listener component. null until the element is
ready — see ComponentElement.component.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected getInitialComponentData(): {}protected initComponent(): voidready(): Promise<AudioListenerComponentElement>Class · extends ComponentElement<ButtonComponent> · category: Components
The ButtonComponentElement interface provides properties and methods for manipulating
<pc-button> elements.
The ButtonComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: ButtonComponent (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>.
get active(): boolean
set active(value: boolean)
Gets whether the button is active.
get component(): ButtonComponent | null
Gets the underlying PlayCanvas button component. null until the element is
ready — see ComponentElement.component.
get fadeDuration(): number
set fadeDuration(value: number)
Gets the duration over which tint transitions are applied.
get hitPadding(): Vec4
set hitPadding(value: Vec4)
Gets the padding used to expand the button's hit area.
get hoverSpriteAsset(): string
set hoverSpriteAsset(value: string)
Gets the id of the pc-asset sprite shown when the button is hovered.
get hoverSpriteFrame(): number
set hoverSpriteFrame(value: number)
Gets the frame of the hover sprite to show.
get hoverTint(): Color
set hoverTint(value: Color)
Gets the hover tint color.
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.
get inactiveSpriteAsset(): string
set inactiveSpriteAsset(value: string)
Gets the id of the pc-asset sprite shown when the button is inactive.
get inactiveSpriteFrame(): number
set inactiveSpriteFrame(value: number)
Gets the frame of the inactive sprite to show.
get inactiveTint(): Color
set inactiveTint(value: Color)
Gets the inactive tint color.
get pressedSpriteAsset(): string
set pressedSpriteAsset(value: string)
Gets the id of the pc-asset sprite shown when the button is pressed.
get pressedSpriteFrame(): number
set pressedSpriteFrame(value: number)
Gets the frame of the pressed sprite to show.
get pressedTint(): Color
set pressedTint(value: Color)
Gets the pressed tint color.
get transitionMode(): "sprite" | "tint"
set transitionMode(value: "sprite" | "tint")
Gets how the button reacts to being hovered/pressed.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<ButtonComponentElement>Class · extends ComponentElement<CameraComponent> · category: Components
The CameraComponentElement interface provides properties and methods for manipulating
<pc-camera> elements.
The CameraComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: CameraComponent (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>.
get arAvailable(): boolean
Whether immersive AR is available. Independent of vrAvailable: a device can offer either mode without the other.
get clearColor(): Color
set clearColor(value: Color)
Gets the clear color of the camera.
get clearColorBuffer(): boolean
set clearColorBuffer(value: boolean)
Gets the clear color buffer of the camera.
get clearDepth(): number
set clearDepth(value: number)
Gets the depth value the depth buffer is cleared to.
get clearDepthBuffer(): boolean
set clearDepthBuffer(value: boolean)
Gets the clear depth buffer of the camera.
get clearStencilBuffer(): boolean
set clearStencilBuffer(value: boolean)
Gets the clear stencil buffer of the camera.
get component(): CameraComponent | null
Gets the underlying PlayCanvas camera component. null until the element is
ready — see ComponentElement.component.
get cullFaces(): boolean
set cullFaces(value: boolean)
Gets the cull faces of the camera.
get farClip(): number
set farClip(value: number)
Gets the far clip distance of the camera.
get flipFaces(): boolean
set flipFaces(value: boolean)
Gets the flip faces of the camera.
get fov(): number
set fov(value: number)
Gets the field of view of the camera.
get frustumCulling(): boolean
set frustumCulling(value: boolean)
Gets the frustum culling of the camera.
get gamma(): "linear" | "srgb"
set gamma(value: "linear" | "srgb")
Gets the gamma correction of the camera.
get horizontalFov(): boolean
set horizontalFov(value: boolean)
Gets whether the camera's field of view (fov) is horizontal or vertical.
get nearClip(): number
set nearClip(value: number)
Gets the near clip distance of the camera.
get orthoHeight(): number
set orthoHeight(value: number)
Gets the orthographic height of the camera.
get priority(): number
set priority(value: number)
Gets the priority of the camera.
get projection(): "perspective" | "orthographic"
set projection(value: "perspective" | "orthographic")
Gets the projection of the camera.
get projectionOffset(): Vec2
set projectionOffset(value: Vec2)
Gets the offset of the projection window from the view direction.
get rect(): Vec4
set rect(value: Vec4)
Gets the rect of the camera.
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.
get scissorRect(): Vec4
set scissorRect(value: Vec4)
Gets the scissor rect of the camera.
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.
get vrAvailable(): boolean
Whether immersive VR is available. Independent of arAvailable: a device can offer either mode without the other.
endXr(): void
Ends the camera's XR mode.
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(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.get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<CameraComponentElement>Class · extends ComponentElement<CollisionComponent> · category: Components
The CollisionComponentElement interface provides properties and methods for manipulating
<pc-collision> elements.
The CollisionComponentElement interface also inherits the properties and methods of the
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 (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>.
get angularOffset(): Quat
set angularOffset(value: Quat)
Gets the rotation of the collision shape relative to the entity, in local space.
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.
get component(): CollisionComponent | null
Gets the underlying PlayCanvas collision component. null until the element is
ready — see ComponentElement.component.
get convexHull(): boolean
set convexHull(value: boolean)
Gets whether a mesh shape is treated as a convex hull rather than a triangle mesh.
get halfExtents(): Vec3
set halfExtents(value: Vec3)
Gets the half-extents of a box shape along its local X, Y and Z axes.
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.
get linearOffset(): Vec3
set linearOffset(value: Vec3)
Gets the position of the collision shape relative to the entity, along its local axes.
get radius(): number
set radius(value: number)
Gets the radius of a sphere, capsule, cylinder or cone shape.
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.
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.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidready(): Promise<CollisionComponentElement>Class · extends ComponentElement<ElementComponent> · category: Components
The ElementComponentElement interface provides properties and methods for manipulating
<pc-element> elements.
The ElementComponentElement interface also inherits the properties and methods of the
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 (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>.
get alignment(): Vec2
set alignment(value: Vec2)
Gets the horizontal and vertical alignment of the text within the element.
get anchor(): Vec4
set anchor(value: Vec4)
Gets the anchor of the element component.
get autoFitHeight(): boolean
set autoFitHeight(value: boolean)
Gets whether a text element automatically reduces its font size to fit its height.
get autoFitWidth(): boolean
set autoFitWidth(value: boolean)
Gets whether a text element automatically reduces its font size to fit its width.
get autoHeight(): boolean
set autoHeight(value: boolean)
Gets whether the element component should automatically adjust its height.
get autoWidth(): boolean
set autoWidth(value: boolean)
Gets whether the element component should automatically adjust its width.
get color(): Color
set color(value: Color)
Gets the color of the element component.
get component(): ElementComponent | null
Gets the underlying PlayCanvas element component. null until the element is
ready — see ComponentElement.component.
get enableMarkup(): boolean
set enableMarkup(value: boolean)
Gets whether the element component should use markup.
get fitMode(): FitMode
set fitMode(value: FitMode)
Gets how the texture or sprite fits the element's rectangle.
get fontAsset(): string
set fontAsset(value: string)
Gets the id of the pc-asset to use for the font.
get fontSize(): number
set fontSize(value: number)
Gets the font size of the element component.
get height(): number
set height(value: number)
Gets the height of the element component.
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.
get lineHeight(): number
set lineHeight(value: number)
Gets the line height of the element component.
get margin(): Vec4 | null
set margin(value: Vec4 | null)
Gets the margin of the element component.
get mask(): boolean
set mask(value: boolean)
Gets whether the element component is a mask.
get maxFontSize(): number
set maxFontSize(value: number)
Gets the largest font size a text element may use when auto-fitting.
get maxLines(): number | null
set maxLines(value: number | null)
Gets the maximum number of lines wrap-lines wraps the text onto.
get minFontSize(): number
set minFontSize(value: number)
Gets the smallest font size a text element may use when auto-fitting.
get opacity(): number
set opacity(value: number)
Gets the opacity of the element component.
get outlineColor(): Color
set outlineColor(value: Color)
Gets the color of the text outline, which is only drawn when outline-thickness is above 0.
get outlineThickness(): number
set outlineThickness(value: number)
Gets the thickness of the text outline.
get pivot(): Vec2
set pivot(value: Vec2)
Gets the pivot of the element component.
get pixelsPerUnit(): number | null
set pixelsPerUnit(value: number | null)
Gets the number of pixels per unit used when rendering a sprite.
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.
get shadowOffset(): Vec2
set shadowOffset(value: Vec2)
Gets the offset of the text shadow.
get spacing(): number
set spacing(value: number)
Gets the spacing between the letters of the text.
get spriteAsset(): string
set spriteAsset(value: string)
Gets the id of the pc-asset to use for the sprite.
get spriteFrame(): number
set spriteFrame(value: number)
Gets the frame of the sprite to render.
get text(): string
set text(value: string)
Gets the text of the element component.
get textureAsset(): string
set textureAsset(value: string)
Gets the id of the pc-asset to use for the texture.
get type(): "text" | "image" | "group"
set type(value: "text" | "image" | "group")
Gets the type of the element component.
get useInput(): boolean
set useInput(value: boolean)
Gets whether the element component accepts input events.
get width(): number
set width(value: number)
Gets the width of the element component.
get wrapLines(): boolean
set wrapLines(value: boolean)
Gets whether the element component should wrap lines.
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.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidready(): Promise<ElementComponentElement>Class · extends ComponentElement<GSplatComponent> · category: Components
The GSplatComponentElement interface provides properties and methods for manipulating
<pc-gsplat> elements.
The GSplatComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: GSplatComponent (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>.
get asset(): string
set asset(value: string)
Gets the id of the pc-asset to use for the splat.
get castShadows(): boolean
set castShadows(value: boolean)
Gets whether the splat casts shadows.
get component(): GSplatComponent | null
Gets the underlying PlayCanvas gsplat component. null until the element is
ready — see ComponentElement.component.
get lodBaseDistance(): number
set lodBaseDistance(value: number)
Gets the camera distance of the first LOD transition.
get lodMultiplier(): number
set lodMultiplier(value: number)
Gets the multiplier between successive LOD transition distances.
get lodRangeMax(): number
set lodRangeMax(value: number)
Gets the maximum allowed LOD index.
get lodRangeMin(): number
set lodRangeMin(value: number)
Gets the minimum allowed LOD index.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<GSplatComponentElement>Class · extends ComponentElement<JointComponent> · category: Components
The JointComponentElement interface provides properties and methods for manipulating
<pc-joint> elements.
The JointComponentElement interface also inherits the properties and methods of the
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 (joint).
get angularDamping(): Vec3
set angularDamping(value: Vec3)
Gets the spring damping of the joint per angular axis.
get angularEquilibrium(): Vec3
set angularEquilibrium(value: Vec3)
Gets the rest angle of the joint's angular springs.
get angularLimitsX(): Vec2
set angularLimitsX(value: Vec2)
Gets the rotation limits of the joint about its X axis.
get angularLimitsY(): Vec2
set angularLimitsY(value: Vec2)
Gets the rotation limits of the joint about its Y axis.
get angularLimitsZ(): Vec2
set angularLimitsZ(value: Vec2)
Gets the rotation limits of the joint about its Z axis.
get angularMotionX(): MotionMode
set angularMotionX(value: MotionMode)
Gets how the joint constrains rotation about its X axis.
get angularMotionY(): MotionMode
set angularMotionY(value: MotionMode)
Gets how the joint constrains rotation about its Y axis.
get angularMotionZ(): MotionMode
set angularMotionZ(value: MotionMode)
Gets how the joint constrains rotation about its Z axis.
get angularStiffness(): Vec3
set angularStiffness(value: Vec3)
Gets the spring stiffness of the joint per angular axis.
get breakImpulse(): number
set breakImpulse(value: number)
Gets the impulse above which the joint breaks.
get component(): JointComponent | null
Gets the underlying PlayCanvas joint component. null until the element is
ready — see ComponentElement.component.
get enableCollision(): boolean
set enableCollision(value: boolean)
Gets whether collision is enabled between the two constrained bodies.
get enableLimits(): boolean
set enableLimits(value: boolean)
Gets whether the limits of the joint are enforced.
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.
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.
get limits(): Vec2
set limits(value: Vec2)
Gets the rotation or travel limits of the joint.
get linearDamping(): Vec3
set linearDamping(value: Vec3)
Gets the spring damping of the joint per linear axis.
get linearEquilibrium(): Vec3
set linearEquilibrium(value: Vec3)
Gets the rest point of the joint's linear springs.
get linearLimitsX(): Vec2
set linearLimitsX(value: Vec2)
Gets the translation limits of the joint along its X axis.
get linearLimitsY(): Vec2
set linearLimitsY(value: Vec2)
Gets the translation limits of the joint along its Y axis.
get linearLimitsZ(): Vec2
set linearLimitsZ(value: Vec2)
Gets the translation limits of the joint along its Z axis.
get linearMotionX(): MotionMode
set linearMotionX(value: MotionMode)
Gets how the joint constrains translation along its X axis.
get linearMotionY(): MotionMode
set linearMotionY(value: MotionMode)
Gets how the joint constrains translation along its Y axis.
get linearMotionZ(): MotionMode
set linearMotionZ(value: MotionMode)
Gets how the joint constrains translation along its Z axis.
get linearStiffness(): Vec3
set linearStiffness(value: Vec3)
Gets the spring stiffness of the joint per linear axis.
get maxMotorForce(): number
set maxMotorForce(value: number)
Gets the maximum torque or force of the joint's motor.
get motorSpeed(): number
set motorSpeed(value: number)
Gets the target speed of the joint's motor.
get swingLimitY(): number
set swingLimitY(value: number)
Gets the maximum swing of the joint's primary axis towards the joint frame's Y axis.
get swingLimitZ(): number
set swingLimitZ(value: number)
Gets the maximum swing of the joint's primary axis towards the joint frame's Z axis.
get twistLimit(): number
set twistLimit(value: number)
Gets the maximum twist of the joint about its primary axis.
get type(): JointType
set type(value: JointType)
Gets the type of the joint.
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.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidready(): Promise<JointComponentElement>Class · extends ComponentElement<LayoutChildComponent> · category: Components
The LayoutChildComponentElement interface provides properties and methods for manipulating
<pc-layout-child> elements.
The LayoutChildComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: LayoutChildComponent (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>.
get component(): LayoutChildComponent | null
Gets the underlying PlayCanvas layout child component. null until the element is
ready — see ComponentElement.component.
get excludeFromLayout(): boolean
set excludeFromLayout(value: boolean)
Gets whether the element is excluded from the layout.
get fitHeightProportion(): number
set fitHeightProportion(value: number)
Gets the proportion of the container's spare height this element should take.
get fitWidthProportion(): number
set fitWidthProportion(value: number)
Gets the proportion of the container's spare width this element should take.
get maxHeight(): number | null
set maxHeight(value: number | null)
Gets the maximum height the element should be laid out with.
get maxWidth(): number | null
set maxWidth(value: number | null)
Gets the maximum width the element should be laid out with.
get minHeight(): number
set minHeight(value: number)
Gets the minimum height the element should be laid out with.
get minWidth(): number
set minWidth(value: number)
Gets the minimum width the element should be laid out with.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<LayoutChildComponentElement>Class · extends ComponentElement<LayoutGroupComponent> · category: Components
The LayoutGroupComponentElement interface provides properties and methods for manipulating
<pc-layout-group> elements.
The LayoutGroupComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: LayoutGroupComponent (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>.
get alignment(): Vec2
set alignment(value: Vec2)
Gets the alignment of the child elements.
get component(): LayoutGroupComponent | null
Gets the underlying PlayCanvas layout group component. null until the element is
ready — see ComponentElement.component.
get heightFitting(): "none" | "stretch" | "shrink" | "both"
set heightFitting(value: "none" | "stretch" | "shrink" | "both")
Gets the fitting mode along the vertical axis.
get orientation(): "horizontal" | "vertical"
set orientation(value: "horizontal" | "vertical")
Gets the orientation of the layout group.
get padding(): Vec4
set padding(value: Vec4)
Gets the padding around the layout group.
get reverseX(): boolean
set reverseX(value: boolean)
Gets whether the order of children is reversed along the horizontal axis.
get reverseY(): boolean
set reverseY(value: boolean)
Gets whether the order of children is reversed along the vertical axis.
get spacing(): Vec2
set spacing(value: Vec2)
Gets the spacing between child elements.
get widthFitting(): "none" | "stretch" | "shrink" | "both"
set widthFitting(value: "none" | "stretch" | "shrink" | "both")
Gets the fitting mode along the horizontal axis.
get wrap(): boolean
set wrap(value: boolean)
Gets whether children wrap onto a new line/column when they overflow the group.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<LayoutGroupComponentElement>Class · extends ComponentElement<LightComponent> · category: Components
The LightComponentElement interface provides properties and methods for manipulating
<pc-light> elements.
The LightComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: LightComponent (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>.
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.
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.
get castShadows(): boolean
set castShadows(value: boolean)
Gets the cast shadows flag of the light.
get color(): Color
set color(value: Color)
Gets the color of the light.
get component(): LightComponent | null
Gets the underlying PlayCanvas light component. null until the element is
ready — see ComponentElement.component.
get innerConeAngle(): number
set innerConeAngle(value: number)
Gets the inner cone angle of the light.
get intensity(): number
set intensity(value: number)
Gets the intensity of the light.
get normalOffsetBias(): number
set normalOffsetBias(value: number)
Gets the normal offset bias of the light.
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.
get outerConeAngle(): number
set outerConeAngle(value: number)
Gets the outer cone angle of the light.
get penumbraFalloff(): number
set penumbraFalloff(value: number)
Gets the penumbra falloff of the light.
get penumbraSize(): number
set penumbraSize(value: number)
Gets the penumbra size of the light.
get range(): number
set range(value: number)
Gets the range of the light.
get shadowBias(): number
set shadowBias(value: number)
Gets the shadow bias of the light.
get shadowBlockerSamples(): number
set shadowBlockerSamples(value: number)
Gets the number of shadow blocker samples.
get shadowDistance(): number
set shadowDistance(value: number)
Gets the shadow distance of the light.
get shadowIntensity(): number
set shadowIntensity(value: number)
Gets the shadow intensity of the light.
get shadowResolution(): number
set shadowResolution(value: number)
Gets the shadow resolution of the light.
get shadowSamples(): number
set shadowSamples(value: number)
Gets the number of shadow samples.
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.
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>.
get type(): "directional" | "omni" | "spot"
set type(value: "directional" | "omni" | "spot")
Gets the type of the light.
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.
get vsmBias(): number
set vsmBias(value: number)
Gets the VSM bias of the light.
get vsmBlurSize(): number
set vsmBlurSize(value: number)
Gets the VSM blur size of the light.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<LightComponentElement>Class · extends ComponentElement<ParticleSystemComponent> · category: Components
The ParticleSystemComponentElement interface provides properties and methods for manipulating
<pc-particle-system> elements.
The ParticleSystemComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: ParticleSystemComponent (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>.
get asset(): string
set asset(value: string)
Gets the id of the pc-asset to use for the model.
get component(): ParticleSystemComponent | null
Gets the underlying PlayCanvas particle system component. null until the element is
ready — see ComponentElement.component.
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.
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(): void
Pauses the particle system
play(): void
Starts playing the particle system
reset(): void
Resets the particle system
stop(): void
Stops the particle system
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidready(): Promise<ParticleSystemComponentElement>Class · extends ComponentElement<RenderComponent> · category: Components
The RenderComponentElement interface provides properties and methods for manipulating
<pc-render> elements.
The RenderComponentElement interface also inherits the properties and methods of the
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 (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>.
get castShadows(): boolean
set castShadows(value: boolean)
Gets the cast shadows flag of the render component.
get component(): RenderComponent | null
Gets the underlying PlayCanvas render component. null until the element is
ready — see ComponentElement.component.
get material(): string
set material(value: string)
Gets the id of the material asset used by the render component.
get receiveShadows(): boolean
set receiveShadows(value: boolean)
Gets the receive shadows flag of the render component.
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.
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.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<RenderComponentElement>Class · extends ComponentElement<RigidBodyComponent> · category: Components
The RigidBodyComponentElement interface provides properties and methods for manipulating
<pc-rigid-body> elements.
The RigidBodyComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: RigidBodyComponent (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>.
get angularDamping(): number
set angularDamping(value: number)
Gets the rate at which the body loses angular velocity over time, from 0 (none) to 1.
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.
get component(): RigidBodyComponent | null
Gets the underlying PlayCanvas rigidbody component. null until the element is
ready — see ComponentElement.component.
get friction(): number
set friction(value: number)
Gets the friction applied where the body contacts another, from 0 (slides freely) to 1 (grips).
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.
get linearDamping(): number
set linearDamping(value: number)
Gets the rate at which the body loses linear velocity over time, from 0 (none) to 1.
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.
get mass(): number
set mass(value: number)
Gets the mass of the body, which applies to dynamic bodies only.
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).
get rollingFriction(): number
set rollingFriction(value: number)
Gets the friction that resists the body rolling across a contact, where friction resists it
sliding.
get type(): "dynamic" | "kinematic" | "static"
set type(value: "dynamic" | "kinematic" | "static")
Gets how the body takes part in the simulation: static, dynamic or kinematic.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<RigidBodyComponentElement>Class · extends ComponentElement<ScreenComponent> · category: Components
The ScreenComponentElement interface provides properties and methods for manipulating
<pc-screen> elements.
The ScreenComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: ScreenComponent (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>.
get component(): ScreenComponent | null
Gets the underlying PlayCanvas screen component. null until the element is
ready — see ComponentElement.component.
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.
get referenceResolution(): Vec2
set referenceResolution(value: Vec2)
Gets the resolution the screen's layout was designed for, as a width and height in pixels.
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.
get scaleBlend(): number
set scaleBlend(value: number)
Gets how the canvas's width and height are weighted against each other.
get scaleMode(): "none" | "blend"
set scaleMode(value: "none" | "blend")
Gets how the screen scales its contents.
get screenSpace(): boolean
set screenSpace(value: boolean)
Gets whether the screen renders its <pc-element> descendants in screen space rather than in
the world.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<ScreenComponentElement>Class · extends ComponentElement<ScriptComponent> · category: Components
The ScriptComponentElement interface provides properties and methods for manipulating
<pc-script> elements.
The ScriptComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: ScriptComponent (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>.
get component(): ScriptComponent | null
Gets the underlying PlayCanvas script component. null until the element is
ready — see ComponentElement.component.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected getInitialComponentData(): {}ready(): Promise<ScriptComponentElement>Class · extends AsyncElement · category: Components
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 interface.
Script attributes can be supplied through two channels:
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.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.
get enabled(): boolean
set enabled(value: boolean)
Gets the enabled state of the script.
get name(): string
set name(value: string)
Gets the name of the script.
get script(): Script | null
Gets the Script instance created for this element. Returns null until the
instance exists — await whenReady or the element's ready() promise before
accessing it.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<ScriptInstanceElement>Class · extends ComponentElement<ScrollbarComponent> · category: Components
The ScrollbarComponentElement interface provides properties and methods for manipulating
<pc-scrollbar> elements.
The ScrollbarComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: ScrollbarComponent (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>.
get component(): ScrollbarComponent | null
Gets the underlying PlayCanvas scrollbar component. null until the element is
ready — see ComponentElement.component.
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.
get handleSize(): number
set handleSize(value: number)
Gets the size of the handle relative to the size of the track.
get orientation(): "horizontal" | "vertical"
set orientation(value: "horizontal" | "vertical")
Gets the orientation of the scrollbar.
get value(): number
set value(value: number)
Gets the current position value of the scrollbar.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<ScrollbarComponentElement>Class · extends ComponentElement<ScrollViewComponent> · category: Components
The ScrollViewComponentElement interface provides properties and methods for manipulating
<pc-scroll-view> elements.
The ScrollViewComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: ScrollViewComponent (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>.
get bounceAmount(): number
set bounceAmount(value: number)
Gets the bounce amount.
get component(): ScrollViewComponent | null
Gets the underlying PlayCanvas scroll view component. null until the element is
ready — see ComponentElement.component.
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.
get friction(): number
set friction(value: number)
Gets the friction.
get horizontal(): boolean
set horizontal(value: boolean)
Gets whether scrolling along the horizontal axis is enabled.
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.
get horizontalScrollbarVisibility(): "always" | "when-required"
set horizontalScrollbarVisibility(value: "always" | "when-required")
Gets the visibility of the horizontal scrollbar.
get mouseWheelSensitivity(): Vec2
set mouseWheelSensitivity(value: Vec2)
Gets the mouse wheel sensitivity.
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.
get useMouseWheel(): boolean
set useMouseWheel(value: boolean)
Gets whether the scroll view responds to mouse wheel events.
get vertical(): boolean
set vertical(value: boolean)
Gets whether scrolling along the vertical axis is enabled.
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.
get verticalScrollbarVisibility(): "always" | "when-required"
set verticalScrollbarVisibility(value: "always" | "when-required")
Gets the visibility of the vertical scrollbar.
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.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<ScrollViewComponentElement>Class · extends ComponentElement<SoundComponent> · category: Components
The SoundComponentElement interface provides properties and methods for manipulating
<pc-sound> elements.
The SoundComponentElement interface also inherits the properties and methods of the
HTMLElement interface.
Engine component: SoundComponent (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>.
get component(): SoundComponent | null
Gets the underlying PlayCanvas sound component. null until the element is
ready — see ComponentElement.component.
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.
get maxDistance(): number
set maxDistance(value: number)
Gets the maximum distance from the listener at which audio falloff stops.
get pitch(): number
set pitch(value: number)
Gets the pitch of the sound.
get positional(): boolean
set positional(value: boolean)
Gets whether the sounds play positionally.
get refDistance(): number
set refDistance(value: number)
Gets the reference distance for reducing volume as the sound source moves further from the listener.
get rollOffFactor(): number
set rollOffFactor(value: number)
Gets the factor used in the falloff equation.
get volume(): number
set volume(value: number)
Gets the volume of the sound.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget enabled(): boolean · set enabled(value: boolean)protected _onReady(): voidprotected _resetReady(): voidprotected initComponent(): voidready(): Promise<SoundComponentElement>Class · extends AsyncElement · category: Components
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 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>.
soundSlot: SoundSlot | null = null
The sound slot.
get asset(): string
set asset(value: string)
Gets the id of the pc-asset to use for the sound slot.
get autoPlay(): boolean
set autoPlay(value: boolean)
Gets the auto play flag of the sound slot.
get duration(): number | null
set duration(value: number | null)
Gets the duration of the sound slot.
get loop(): boolean
set loop(value: boolean)
Gets the loop flag of the sound slot.
get name(): string
set name(value: string)
Gets the name of the sound slot.
get overlap(): boolean
set overlap(value: boolean)
Gets the overlap flag of the sound slot.
get pitch(): number
set pitch(value: number)
Gets the pitch of the sound slot.
get startTime(): number
set startTime(value: number)
Gets the start time of the sound slot.
get volume(): number
set volume(value: number)
Gets the volume of the sound slot.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<SoundSlotElement>Class · extends HTMLElement · category: Base Classes
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.
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.
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.
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
has re-armed the promise does nothing.
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(): Promise<AsyncElement>
Returns a promise that resolves with this element when it's ready. This is the low-level primitive underlying whenReady, 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>: A promise that resolves with this element when it's ready.
Class · extends AsyncElement · category: Base Classes
Represents a component in the PlayCanvas engine.
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 or the element's ready() promise
before accessing it.
get enabled(): boolean
set enabled(value: boolean)
Gets the enabled state of the component.
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.
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.
get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<ComponentElement<T>>Class · extends AsyncElement · category: Base Classes
The base class for elements that front an engine Entity: <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.
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.
get entity(): Entity | null
The PlayCanvas entity instance. null until the element is ready, and again once the
entity is gone — await whenReady or the element's ready() promise before
accessing it.
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.protected _unregisterEntity(entity: Entity): void
Removes the registration for entity.
Parameters
entity (Entity): The entity to unregister.get closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullprotected _onReady(): voidprotected _resetReady(): voidready(): Promise<EntityBaseElement>Class · extends EntityBaseElement · category: Base Classes
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.
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.
get enabled(): boolean
set enabled(value: boolean)
Gets the enabled state of the entity.
get name(): string
set name(value: string)
Gets the name of the entity.
get position(): Vec3
set position(value: Vec3)
Gets the position of the entity.
get rotation(): Vec3
set rotation(value: Vec3)
Gets the rotation of the entity.
get scale(): Vec3
set scale(value: Vec3)
Gets the scale of the entity.
get tags(): string[]
set tags(value: string[])
Gets the tags of the entity.
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.
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.protected _appElement: AppElement | null = nullget closestApp(): AppElement | nullget closestEntity(): EntityBaseElement | nullget entity(): Entity | nullprotected _onReady(): voidprotected _registerEntity(entity: Entity): voidprotected _resetReady(): voidprotected _unregisterEntity(entity: Entity): voidready(): Promise<EntityOwnerElement>Function · category: Functions
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): The tag name of the element to wait for (e.g. 'pc-app').Returns Promise<HTMLElementTagNameMap[K]>: A promise that resolves with the element once it's ready.
Example
const { app } = await whenReady('pc-app');
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): The element to wait for.Returns Promise<T>: A promise that resolves with the element once it's ready.
Example
const appElement = document.createElement('pc-app');
document.body.appendChild(appElement);
const { app } = await whenReady(appElement);
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 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): A CSS selector matching the element to wait for (e.g. '#my-app').Returns Promise<T>: A promise that resolves with the element once it's ready.
Example
// In TypeScript, supply the element type when using an arbitrary selector
const { entity } = await whenReady<EntityElement>('pc-entity[name="camera"]');
Type alias · category: Types
The addressing modes for a texture asset.
type AddressMode = "repeat" | "clamp" | "mirror"
Type alias · category: Types
A union of the tag names of all elements that initialize asynchronously (i.e. elements whose classes extend AsyncElement).
type AsyncElementTagName = { [K in keyof HTMLElementTagNameMap]: HTMLElementTagNameMap[K] extends AsyncElement ? K : never }[keyof HTMLElementTagNameMap]
Type alias · category: Types
The blend modes for a material.
type BlendType = "none" | "normal" | "additive" | "additive-alpha" | "premultiplied" | "multiplicative" | "multiplicative-2x" | "screen" | "min" | "max" | "subtractive"
Type alias · category: Types
The texture channels a color map can sample.
type ColorChannel = "r" | "g" | "b" | "a" | "rgb"
Type alias · category: Types
The face culling modes for a material.
type CullMode = "none" | "back" | "front" | "front-and-back"
Type alias · category: Types
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.
type FitMode = "stretch" | "contain" | "cover"
Type alias · category: Types
The Fresnel models for a material.
type FresnelModel = "none" | "schlick"
Type alias · category: Types
One material assignment of a HierarchyNode with a render component: a mesh instance's position within the component and the runtime name of its current material.
type HierarchyMaterial = undefined
Type alias · category: Types
One node of the tree returned by ModelElement.hierarchy. A plain-data snapshot —
JSON.stringify serializes it — whose toString() renders the node's subtree as a printable
tree.
type HierarchyNode = undefined
Type alias · category: Types
The constraint types supported by the <pc-joint> element.
type JointType = "fixed" | "ball" | "hinge" | "slider" | "6dof"
Type alias · category: Types
The light source shapes supported by the <pc-light> element: a punctual point, or an area
light shaped as a rect, disk or sphere.
type LightShape = "punctual" | "rect" | "disk" | "sphere"
Type alias · category: Types
The magnification filter modes for a texture asset. Magnification has no mip variants - the engine (and the GPU) only accepts these two.
type MagFilterMode = "nearest" | "linear"
Type alias · category: Types
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.
type MaterialOverrides = Readonly<Record<string, string>>
Type alias · category: Types
The minification filter modes for a texture asset.
type MinFilterMode = "nearest" | "linear" | "nearest-mip-nearest" | "linear-mip-nearest" | "nearest-mip-linear" | "linear-mip-linear"
Type alias · category: Types
The motion modes for a single joint axis: fully constrained (locked), constrained within
limits (limited) or unconstrained (free).
type MotionMode = "locked" | "limited" | "free"
Type alias · category: Types
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.
type NodeBindingState = "pending" | "bound" | "missing" | "ambiguous" | "duplicate"
Type alias · category: Types
The specular occlusion modes for a material.
type OccludeSpecular = "none" | "ao" | "gloss-dependent"
Type alias · category: Types
The opacity dithering modes for a material.
type OpacityDither = "none" | "bayer2" | "bayer4" | "bayer8" | "bayer16" | "bluenoise" | "ignnoise"
Type alias · category: Types
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.
type ParallaxMode = "offset" | "occlusion"
Type alias · category: Types
The texture channels a scalar map can sample.
type ScalarChannel = "r" | "g" | "b" | "a"