Adjust the trigger demo

examples/js/Demo.js

@@ -896,8 +896,8 @@ class Demo extends CANNON.EventTarget {
     }
 
     // if it's a particle paint it red, if it's a trigger paint it as green, otherwise just gray
-    const isParticule = body.shapes.every((s) => s instanceof CANNON.Particle)
-    const material = isParticule ? this.particleMaterial : body.isTrigger ? this.triggerMaterial : this.currentMaterial
+    const isParticle = body.shapes.every((s) => s instanceof CANNON.Particle)
+    const material = isParticle ? this.particleMaterial : body.isTrigger ? this.triggerMaterial : this.currentMaterial
 
     // get the correspondant three.js mesh
     const mesh = bodyToMesh(body, material)

examples/trigger.html

@@ -12,46 +12,52 @@
       import { Demo } from './js/Demo.js'
 
       /**
-       * Demonstrates how to make use of trigger to allow others body to pass through them, yet still emit collision events
+       * Demonstrates the use of trigger bodies, bodies which don't
+       * collide with other bodies and allow you to run callbacks
+       * when another body enters/exits them.
        */
       const demo = new Demo()
 
       demo.addScene('Trigger', () => {
         const world = setupWorld(demo)
 
-        const boxShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1))
-        const sphereShape = new CANNON.Sphere(1)
+        const radius = 1
 
-        // Trigger body
-        const triggerBox = new CANNON.Body({ isTrigger: true })
-        triggerBox.addShape(boxShape)
-        triggerBox.position.set(-5, 0, 0)
-        world.addBody(triggerBox)
-        demo.addVisual(triggerBox)
+        // Sphere moving towards right
+        const sphereShape = new CANNON.Sphere(radius)
+        const sphereBody = new CANNON.Body({ mass: 1 })
+        sphereBody.addShape(sphereShape)
+        sphereBody.position.set(-5, 0, 0)
+        const impulse = new CANNON.Vec3(5.5, 0, 0)
+        const topPoint = new CANNON.Vec3(0, radius, 0)
+        sphereBody.applyImpulse(impulse, topPoint)
+        sphereBody.linearDamping = 0.3
+        sphereBody.angularDamping = 0.3
+        world.addBody(sphereBody)
+        demo.addVisual(sphereBody)
 
-        // Sphere
-        const movingSphere = new CANNON.Body({ mass: 5 })
-        movingSphere.addShape(sphereShape)
-        movingSphere.position.set(5, 0, 0)
-        movingSphere.velocity.set(-5, 0, 0)
-        movingSphere.linearDamping = 0
-        world.addBody(movingSphere)
-        demo.addVisual(movingSphere)
+        // Trigger body
+        const boxShape = new CANNON.Box(new CANNON.Vec3(2, 2, 5))
+        const triggerBody = new CANNON.Body({ isTrigger: true })
+        triggerBody.addShape(boxShape)
+        triggerBody.position.set(5, radius, 0)
+        world.addBody(triggerBody)
+        demo.addVisual(triggerBody)
 
-        // When a body collides with another body, they both dispatch the "collide" event.
-        triggerBox.addEventListener('collide', (event) => {
-          console.log('The box trigger was collided!', event)
-        })
-        movingSphere.addEventListener('collide', (event) => {
-          console.log('The sphere was collided!', event)
+        // It is possible to run code on the exit/enter
+        // of the trigger.
+        triggerBody.addEventListener('collide', (event) => {
+          if (event.body === sphereBody) {
+            console.log('The sphere entered the trigger!', event)
+          }
         })
-
-        // When two bodies collide they also emit contact events
         world.addEventListener('endContact', (event) => {
-          console.log('World end contact event', event)
-        })
-        world.addEventListener('beginContact', (event) => {
-          console.log('World begin contact event', event)
+          if (
+            (event.bodyA === sphereBody && event.bodyB === triggerBody) ||
+            (event.bodyB === sphereBody && event.bodyA === triggerBody)
+          ) {
+            console.log('The sphere exited the trigger!', event)
+          }
         })
       })
 

readme.md

@@ -6,16 +6,16 @@ It's a type-safe flatbundle (esm and cjs) which allows for **tree shaking** and
 
 These minor changes and improvements were also made:
 
-- These PRs from the original repo were merged: [schteppe/cannon.js#433](https://github.com/schteppe/cannon.js/pull/433), [schteppe/cannon.js#430](https://github.com/schteppe/cannon.js/pull/430), [schteppe/cannon.js#418](https://github.com/schteppe/cannon.js/pull/418), [schteppe/cannon.js#360](https://github.com/schteppe/cannon.js/pull/360), [schteppe/cannon.js#265](https://github.com/schteppe/cannon.js/pull/265), [schteppe/cannon.js#392](https://github.com/schteppe/cannon.js/pull/392)
+- These PRs from the original repo were merged: [schteppe/cannon.js#433](https://github.com/schteppe/cannon.js/pull/433), [schteppe/cannon.js#430](https://github.com/schteppe/cannon.js/pull/430), [schteppe/cannon.js#418](https://github.com/schteppe/cannon.js/pull/418), [schteppe/cannon.js#360](https://github.com/schteppe/cannon.js/pull/360), [schteppe/cannon.js#265](https://github.com/schteppe/cannon.js/pull/265), [schteppe/cannon.js#392](https://github.com/schteppe/cannon.js/pull/392), [schteppe/cannon.js#424](https://github.com/schteppe/cannon.js/pull/424)
 - The `ConvexPolyhedron` constructor now accepts an object instead of a list of arguments. [#6](https://github.com/pmndrs/cannon-es/pull/6)
 - The `Cylinder` is now oriented on the Y axis. [#30](https://github.com/pmndrs/cannon-es/pull/30)
 - The `type` property of the `Cylinder` is now equal to `Shape.types.CYLINDER`. [#59](https://github.com/pmndrs/cannon-es/pull/59)
 - `Body.applyImpulse()` and `Body.applyForce()` are now relative to the center of the body instead of the center of the world [86b0444](https://github.com/schteppe/cannon.js/commit/86b0444c93356aeaa25dd1af795fa162574c6f4b)
 - Sleeping bodies now wake up if a force or an impulse is applied to them [#61](https://github.com/pmndrs/cannon-es/pull/61)
 - Added a property `World.hasActiveBodies: boolean` which will be false when all physics bodies are sleeping. This allows for invalidating frames when physics aren't active for increased performance.
+- Add support for [Trigger bodies](https://pmndrs.github.io/cannon-es/examples/trigger). [#79](https://github.com/pmndrs/cannon-es/pull/79)
 - Deprecated properties and methods have been removed.
 - The [original cannon.js debugger](https://github.com/schteppe/cannon.js/blob/master/tools/threejs/CannonDebugRenderer.js), which shows the wireframes of each body, has been moved to its own repo [cannon-es-debugger](https://github.com/pmndrs/cannon-es-debugger).
-- Added a property `Body.isTrigger : boolean` which, when true allows for the body to trigger collision events without interacting physically with the other colliding bodies.
 
 If instead you're using three.js in a **React** environment with [react-three-fiber](https://github.com/pmndrs/react-three-fiber), check out [use-cannon](https://github.com/pmndrs/use-cannon)! It's a wrapper around cannon-es.
 

src/objects/Body.ts

@@ -131,7 +131,12 @@ export class Body extends EventTarget {
   aabbNeedsUpdate: boolean // Indicates if the AABB needs to be updated before use.
   boundingRadius: number // Total bounding radius of the Body including its shapes, relative to body.position.
   wlambda: Vec3
-  isTrigger: boolean // When true "collide" events are still triggered but bodies do not interact.
+  /**
+   * When true the body behaves like a trigger. It does not collide
+   * with other bodies but collision events are still triggered.
+   * @default false
+   */
+  isTrigger: boolean
 
   static idCounter: number
   static COLLIDE_EVENT_NAME: 'collide'