# JointComponentElement

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

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

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

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

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

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

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

## Accessors

### angularDamping

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

Gets the spring damping of the joint per angular axis.

### angularEquilibrium

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

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

### angularLimitsX

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

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

### angularLimitsY

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

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

### angularLimitsZ

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

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

### angularMotionX

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

Gets how the joint constrains rotation about its X axis.

### angularMotionY

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

Gets how the joint constrains rotation about its Y axis.

### angularMotionZ

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

Gets how the joint constrains rotation about its Z axis.

### angularStiffness

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

Gets the spring stiffness of the joint per angular axis.

### breakImpulse

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

Gets the impulse above which the joint breaks.

### component

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

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

### enableCollision

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

Gets whether collision is enabled between the two constrained bodies.

### enableLimits

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

Gets whether the limits of the joint are enforced.

### entityA

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

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

### entityB

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

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

### limits

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

Gets the rotation or travel limits of the joint.

### linearDamping

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

Gets the spring damping of the joint per linear axis.

### linearEquilibrium

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

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

### linearLimitsX

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

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

### linearLimitsY

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

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

### linearLimitsZ

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

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

### linearMotionX

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

Gets how the joint constrains translation along its X axis.

### linearMotionY

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

Gets how the joint constrains translation along its Y axis.

### linearMotionZ

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

Gets how the joint constrains translation along its Z axis.

### linearStiffness

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

Gets the spring stiffness of the joint per linear axis.

### maxMotorForce

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

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

### motorSpeed

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

Gets the target speed of the joint's motor.

### swingLimitY

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

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

### swingLimitZ

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

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

### twistLimit

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

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

### type

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

Gets the type of the joint.

## Methods

### getInitialComponentData

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

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

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

### initComponent

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

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

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

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