Rapier logo

Custom colliders

Add custom colliders not tied to a 3D mesh to define precise collision shapes using cuboid, ball, capsule, hull, trimesh, and other built-in collider types.

You can add colliders that are not tied to a 3D mesh, this way you can create your own collider shape.

<template>
  <RigidBody>
    <BallCollider />
  </RigidBody>
</template>
Custom collider needs to be child of a Rigid-body component.

Available as component

PropDescription
<CuboidCollider>Box shape
<BallCollider>Sphere shape
<CapsuleCollider>Capsule shape
<ConeCollider>Cone shape
<CylinderCollider>Cylinder shape
<ConvexHullCollider>The smallest convex shape that contains all the given points.
<ConvexMeshCollider>Convex mesh generated from the provided mesh geometry.
<TrimeshCollider>A set of indices indicating what vertex is used by what triangle.
<HeightfieldCollider>Large rectangle in the X-Z plane, subdivided in a grid pattern at regular intervals
<PolylineCollider>Polyline generated from line segments defined by points.
<RoundConeCollider>Rounded cone shape.
<RoundConvexHullCollider>Rounded convex hull generated from points.
<RoundConvexMeshCollider>Rounded convex mesh generated from mesh geometry.
<RoundCuboidCollider>Rounded box shape.
<RoundCylinderCollider>Rounded cylinder shape.
Avoid using <TrimeshCollider > with dynamic bodies, since the performance get compromised

Collisions

Similar to how collisions work in rigid-bodies you can set a custom collider to receive collisions events.

Be aware that the event will be emitted by the RigidBody parent

<template>
  <RigidBody
    @collision-enter="onCollisionEnter"
    @collision-exit="onCollisionExit"
  >
    <BallCollider activeCollision />
  </RigidBody>
</template>

Props

shape
ColliderShape
Default: cuboid - shape of the collider.
args
[halfWidth: number, halfHeight: number, halfDepth: number] | [radius: number]
Default: [1,1,1] - The half-sizes of the collider shapes.
object
TresObject3D
Required for certain shapes like trimesh, hull, heightfield.
friction
number
Default: 0.5 - The friction coefficient of this collider. (automatic-collider).
mass
number
Default: 1 - Mass of the collider. (automatic-collider).
density
number
Default: 0 - Restitution controls how elastic (aka. bouncy) a contact is. (automatic-collider).
restitution
number
Default: 1 - The collider density. If non-zero the collider's mass and angular inertia will be added. (automatic-collider).
activeCollision
boolean
Default: false - To set the collider receiver/emitter collision events.
activeCollisionTypes
ActiveCollisionTypes
Default: ActiveCollisionTypes.DEFAULT - Type of the collision event.
collisionGroups
number | undefined
Default: undefined - To specify collision groups.
If you only want to rely on custom colliders you can set false to collider props, this way you deactivate the automatic collider.

You can access the Collider instance which offers full control over all the properties & methods available by using Template refs.

Expose object

instance
Collider
The Rapier Collider instance created for this custom collider. See API
colliderDesc
ColliderDesc
The Rapier collider descriptor used to initialize the collider. See API

Automatic colliders

Automatically generated colliders that fit your mesh shape when a RigidBody is created, with support for cuboid, ball, capsule, and other preset shapes.

Forces

Apply forces and impulses to rigid bodies to drive physics interactions, such as making objects jump or move programmatically.