# ModelElement Class · extends [`EntityOwnerElement`](https://api.playcanvas.com/web-components/classes/EntityOwnerElement.md) · category: Entities Source: https://github.com/playcanvas/web-components/blob/252f001881302c266c8d727044408c32be2bb5e7/src/model.ts#L186 The ModelElement interface provides properties and methods for manipulating [``](https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/) elements. The ModelElement interface also inherits the properties and methods of the [HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface. The element creates and fronts a stable host entity: `entity` is that host, created when the application builds its hierarchy and kept across `asset` changes, so the element's transform and tags are instance placement that composes with whatever transform the asset authored on its root. The instantiated content is parented beneath the host and exposed as [contentEntity](https://api.playcanvas.com/web-components/classes/ModelElement.md#contententity). The element becomes ready once its current asset selection has settled: the container asset has loaded and its content root has been parented beneath the host, the load has failed (`contentEntity` stays `null` — listen for `error`, or check `contentEntity`, to tell the outcomes apart), or no asset is assigned at all. Changing `asset` re-arms readiness and instantiates anew, so a `ready()` obtained after the change resolves against the new content. A `pc-model` outside a `pc-app`, or referencing an unknown asset id, warns and never becomes ready. The pointer events below are dispatched by the containing `` element when the pointer intersects the model's geometry, exactly as for `` — a hit on a content node that no `pc-node` fronts resolves to this element. **elementSummary** The `` 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 `` children override what the asset authored. Place it in the ``, or nest it under a ``, another `` or a ``. **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 `` 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 `` when it went to the background. **fires** pointerleave - Fired when the pointer moves off the model and every entity below it. Does not bubble. **fires** click - Fired when a primary pointer button is pressed and then released over the model. A press and release that picked different elements fires on their nearest common ancestor instead, as in the DOM. `detail` carries the click count, so a double click arrives as a click whose `detail` is 2. **fires** load - Fired each time a container asset finishes instantiating, including re-instantiation after `asset` changes. Does not bubble — listen on this element, or use a capture-phase listener on an ancestor. **fires** error - Fired when the container asset fails to load, with the engine's error in `message`. Does not bubble. The element still becomes ready — readiness means the load settled, not that it succeeded. ## Accessors ### asset ```ts get asset(): string set asset(value: string) ``` Gets the id of the `pc-asset` to use for the model. ### contentEntity ```ts get contentEntity(): Entity | null ``` The root entity of the instantiated model content, parented beneath the host entity. `null` until the container asset has loaded and been instantiated, after a failed load, and again once the element has been removed from the document. ## Methods ### _onBuilt ```ts protected _onBuilt(): void ``` Starts (or restarts) the content load once the host has been parented. Readiness is not announced here — it tracks the content settling, not the host entering the scene graph. ### _onEntityDestroy ```ts protected _onEntityDestroy(entity: Entity): void ``` Extends the owner reset for the content: the engine's destroy cascade has already taken the content root down with the host subtree, so only the reference and the in-flight load are dropped here. The next build re-creates the host and re-instantiates the content. **Parameters** - `entity` (`Entity`): The host entity that was destroyed. ### hierarchy ```ts hierarchy(): HierarchyNode | null ``` Returns a snapshot of the instantiated node tree, or `null` while there is none (the container asset has not loaded, or the element has left the document). One call grounds a session — a browser console, a test, an agent — in the vocabulary `pc-node` binding resolves against: the instantiated names ([HierarchyNode.name](https://api.playcanvas.com/web-components/types/HierarchyNode.md#name)), paths, match indices, attached component types and the material assignments of render components ([HierarchyNode.materials](https://api.playcanvas.com/web-components/types/HierarchyNode.md#materials)). `String(...)` of the result, or of any node in it, is the printable form. The snapshot is plain data, computed afresh each call: it does not follow later changes to the hierarchy, and mutating it changes nothing. It covers the instantiated content only — the host entity the element fronts is not part of the asset's node tree. **Returns** [`HierarchyNode`](https://api.playcanvas.com/web-components/types/HierarchyNode.md) `| null`: The root of the instantiated node tree, or `null`. ## Inherited from [EntityOwnerElement](https://api.playcanvas.com/web-components/classes/EntityOwnerElement.md) - `protected _appElement: AppElement | null = null` - `protected _built: boolean = false` - `get closestApp(): AppElement | null` - `get closestEntity(): EntityBaseElement | null` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get entity(): Entity | null` - `get name(): string` · `set name(value: string)` - `get position(): Vec3` · `set position(value: Vec3)` - `get rotation(): Vec3` · `set rotation(value: Vec3)` - `get scale(): Vec3` · `set scale(value: Vec3)` - `get tags(): string[]` · `set tags(value: string[])` - `protected _onReady(): void` - `protected _registerEntity(entity: Entity): void` - `protected _resetReady(): void` - `protected _unregisterEntity(entity: Entity): void` - `ready(): Promise`