Collision Events

In Babylon.js, collision events enable the detection and response to interactions between physics-enabled objects. These events provide information about when two bodies start colliding, remain in contact, or separate. By handling collision events, you can trigger various effects such as applying forces, playing sounds, or managing game mechanics.

The two types of events are:

Collisions

Collisions occur when two physics-enabled objects make contact. The physics engine detects these interactions and can apply physical responses, like bouncing, stopping, or sliding.

• Effect: objects cannot pass through each other, and the physics engine calculates their reactions based on mass, velocity, and restitution.
• Example: a ball hitting the ground and bouncing.

There are three types of collision events:

They must be enabled before use, you can do it as following:

// enable/disable `COLLISION_STARTED` and `COLLISION_CONTINUED`
physicsBody.setCollisionCallbackEnabled(value); 
 
// enable/disable `COLLISION_FINISHED`
physicsBody.setCollisionEndedCallbackEnabled(value);

In the example below, a basic collision is demonstrated. Open your Developer Console and click on the sphere, each collision event will be logged in the console. Additionally, the sphere changes its color every time a COLLISION_STARTED event is triggered.

useEffect(() => {
    sphereRef.current!.physicsBody?.setCollisionCallbackEnabled(true);
    sphereRef.current!.physicsBody?.setCollisionEndedCallbackEnabled(true);
 
    havok.onCollisionObservable.add((event) => {
        console.log(event.type);
        if (event.type === PhysicsEventType.COLLISION_STARTED) {
            (sphereRef.current!.material as StandardMaterial).diffuseColor = Color3.Random();
        }
    })
    havok.onCollisionEndedObservable.add((event) => {
        console.log(event.type);
    })
}, []);

Triggers

Triggers detect when an object enters, stays inside or exits a predefined area but doesn’t physically interact with it.

• Effect: objects can pass through triggers without being affected by forces. Triggers are used for event-based interactions, not physics responses.
• Example: a character walking into an invisible zone that activates a door opening.

The example below demonstrates a basic trigger. Open your Developer Console and click on the sphere, each time it enters or exits the red box, the corresponding event will be logged. Additionally, the sphere turns yellow when entering the red box and blue when exiting.

useEffect(() => {
    const material = sphereRef.current?.material as StandardMaterial;
    havok.onTriggerCollisionObservable.add((event) => {
        if (event.type === PhysicsEventType.TRIGGER_ENTERED) {
            material.diffuseColor = Color3.Yellow();
        } else if (event.type === PhysicsEventType.TRIGGER_EXITED) {
            material.diffuseColor = Color3.Blue();
        }
        console.log(event.type);
    });
}, []);

Learn More

For advanced use cases and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/physics/collisionEvents/.