# CollisionComponentElement

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

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

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

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

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

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

## Accessors

### angularOffset

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

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

### axis

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

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

### component

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

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

### convexHull

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

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

### halfExtents

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

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

### height

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

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

### linearOffset

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

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

### radius

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

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

### type

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

Gets the shape of the collision volume.

## Methods

### getInitialComponentData

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

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

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

### initComponent

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

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

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

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