src/examples/collisiongroup-and-collisionmask.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CollisionGroup and CollisionMask</title>
    <link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
    <script src="/js/examples.js?ver=1.1.1"></script>
    <script src="/lib/enable3d/enable3d.framework.0.25.4.min.js"></script>
  </head>

  <body>
    <div id="info-text">
      The Red Balls collide not with them self.<br />
      The Blue Balls collide only with the Red Balls.<br />
      The Green Cubes collide only with the Ground and them self.
    </div>
    <script>
      const { Project, Scene3D, PhysicsLoader } = ENABLE3D

      class MainScene extends Scene3D {
        constructor() {
          super({ key: 'MainScene' })
        }

        create() {
          this.warpSpeed()

          // we have 4 groups
          // default    0001  (1)
          // red        0010  (2)
          // blue       0100  (4)
          // green      1000  (8)

          // the ground is by default in the default group

          // red balls
          for (let i = 0; i < 20; i++) {
            const x = this.randomPosition(),
              y = this.randomHeight(-5),
              z = this.randomPosition()

            const collisionGroup = 2,
              collisionMask = parseInt('1101')

            const sphere = this.physics.add.sphere(
              { x, y, z, collisionGroup, collisionMask, radius: 1 },
              { lambert: { color: 'red' } }
            )
            sphere.body.setBounciness(0.5)
          }

          // blue balls
          setTimeout(() => {
            for (let i = 0; i < 20; i++) {
              const x = this.randomPosition(),
                y = this.randomHeight(),
                z = this.randomPosition()

              const collisionGroup = 4,
                collisionMask = 2

              const sphere = this.physics.add.sphere(
                { x, y, z, collisionGroup, collisionMask, radius: 0.5 },
                { lambert: { color: 'blue' } }
              )
              sphere.body.setBounciness(0.5)
            }
          }, 2000)

          // green boxes
          setTimeout(() => {
            for (let i = 0; i < 20; i++) {
              const x = this.randomPosition(),
                y = this.randomHeight(0),
                z = this.randomPosition()

              const collisionGroup = 8,
                collisionMask = 9 // 1 + 8

              const box = this.physics.add.box(
                { x, y, z, collisionGroup, collisionMask },
                { lambert: { color: 'green' } }
              )
              box.body.setBounciness(0.5)
            }
          }, 4000)
        }

        randomPosition() {
          return (Math.random() - 0.5) * 5
        }

        randomHeight(offset = 0) {
          return Math.random() * 10 + 5 + offset
        }
      }

      PhysicsLoader('/lib/ammo/kripken', () => {
        new Project({ scenes: [MainScene] })
      })
    </script>
  </body>
</html>