How to use cannon - 10 common examples

'down': new KeyBinding('KeyS'),
            'left': new KeyBinding('KeyA'),
            'right': new KeyBinding('KeyD'),
            'run': new KeyBinding('ShiftLeft'),
            'jump': new KeyBinding('Space'),
            'use': new KeyBinding('KeyE'),
            'enter': new KeyBinding('KeyF'),
            'primary': new KeyBinding('Mouse0'),
            'secondary': new KeyBinding('Mouse1'),
        };

        // Physics
        // Player Capsule
        let capsulePhysics = new CapsulePhysics({
            mass: 1,
            position: new CANNON.Vec3().copy(options['position']),
            height: 0.5,
            radius: 0.25,
            segments: 8,
            friction: 0.1
        });
        this.characterCapsule = new SBObject();
        this.characterCapsule.setPhysics(capsulePhysics);

        // Pass reference to character for callbacks
        // this.characterCapsule.physics.physical.character = this;

        // Move character to different collision group for raycasting
        this.characterCapsule.physics.physical.collisionFilterGroup = 2;

        // Disable character rotation
        this.characterCapsule.physics.physical.fixedRotation = true;

this.collision.quaternion.z,
            this.collision.quaternion.w
        );
        let forward = new THREE.Vector3(0, 0, 1).applyQuaternion(quat);
        
        const engineForce = 4000;
        const maxGears = 4;
        const gearsMaxSpeeds = {
            'R': -4,
            '0': 0,
            '1': 4,
            '2': 8,
            '3': 12,
            '4': 32
        };
        const velocity = new CANNON.Vec3().copy(this.collision.velocity);
        const currentSpeed = velocity.dot(Utils.cannonVector(forward));
        velocity.normalize();
        let driftCorrection = Utils.getSignedAngleBetweenVectors(Utils.threeVector(velocity), forward);

        // Engine
        if (this.shiftTimer > 0)
        {
            this.shiftTimer -= timeStep;
            if (this.shiftTimer < 0) this.shiftTimer = 0;
        }
        else
        {
            // Transmission 
            if (this.actions.reverse.isPressed)
            {
                const powerFactor = (gearsMaxSpeeds['R'] - currentSpeed) / Math.abs(gearsMaxSpeeds['R']);

initBody: function () {
    var el = this.el,
        data = this.data;

    var obj = this.el.object3D;
    var pos = obj.position;
    var quat = obj.quaternion;

    this.body = new CANNON.Body({
      mass: data.type === 'static' ? 0 : data.mass || 0,
      material: this.system.getMaterial('defaultMaterial'),
      position: new CANNON.Vec3(pos.x, pos.y, pos.z),
      quaternion: new CANNON.Quaternion(quat.x, quat.y, quat.z, quat.w),
      linearDamping: data.linearDamping,
      angularDamping: data.angularDamping,
      type: data.type === 'dynamic' ? CANNON.Body.DYNAMIC : CANNON.Body.STATIC,
    });

    // Matrix World must be updated at root level, if scale is to be applied – updateMatrixWorld()
    // only checks an object's parent, not the rest of the ancestors. Hence, a wrapping entity with
    // scale="0.5 0.5 0.5" will be ignored.
    // Reference: https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js#L511-L541
    // Potential fix: https://github.com/mrdoob/three.js/pull/7019
    this.el.object3D.updateMatrixWorld(true);

    if(data.shape !== 'none') {
      var options = data.shape === 'auto' ? undefined : AFRAME.utils.extend({}, this.data, {
        type: mesh2shape.Type[data.shape.toUpperCase()]

init() {
    /*----- CREATE WALL -----*/
    const wallBody = new CANNON.Body({ mass: 0 });
    wallBody.addShape(this.fixedCubeShape);
    const wallMesh = new THREE.Mesh(this.fixedCubeGeometry, this.material);

    /*----- SET SPAWN POSITION -----*/
    wallMesh.position.set(this.x, this.y, this.z);
    wallBody.position.set(this.x, this.y, this.z);

    scene.add(wallMesh);
    world.add(wallBody);

    this.wallMesh = wallMesh;
    this.wallBody = wallBody;
  }
}

init() {
    /*----- CREATE FIXED CUBE -----*/
    const fixedCubeBody = new CANNON.Body({ mass: 0 });
    fixedCubeBody.addShape(this.fixedCubeShape);
    const fixedCubeMesh = new THREE.Mesh(this.fixedCubeGeometry, this.material);

    /*----- SETS SPAWN POSITION -----*/
    fixedCubeMesh.position.set(this.x, this.y, this.z);
    fixedCubeBody.position.set(fixedCubeMesh.position.x, fixedCubeMesh.position.y, fixedCubeMesh.position.z);

    scene.add(fixedCubeMesh);
    world.add(fixedCubeBody);

    this.fixedCubeMesh = fixedCubeMesh;
    this.fixedCubeBody = fixedCubeBody;
  }
}

init() {
    /*----- CREATE PLAYER -----*/
    const cubeBox = new CANNON.Body({ mass: 0 });
    cubeBox.addShape(this.fixedCubeShape)
    const cubeMesh = new THREE.Mesh(this.fixedCubeGeometry, this.material);

    /*----- SETS SPAWN POSITION -----*/
    cubeMesh.position.set(this.x, this.y, this.z);
    cubeBox.position.set(cubeMesh.position.x, cubeMesh.position.y, cubeMesh.position.z);

    scene.add(cubeMesh)
    world.add(cubeBox)

    this.cubeMesh = cubeMesh;
    this.cubeBox = cubeBox;
  }

BoxCollider.prototype.createShape = function(bounds)
{
    if (!this._halfExtents)
        this._halfExtents = bounds.getHalfExtents();

    var vec3 = new CANNON.Vec3();
    vec3.copy(this._halfExtents);
    return new CANNON.Box(vec3);
};

const pitchObject = new THREE.Object3D();
  pitchObject.add(camera);

  let moveForward = false;
  let moveBackward = false;
  let moveLeft = false;
  let moveRight = false;
  let canJump = false;

  const yawObject = new THREE.Object3D();
  yawObject.position.y = 2;
  yawObject.add(pitchObject);
  const quat = new THREE.Quaternion();

  /*----- NORMAL IN CONTACT, POINTING OUT OF WHATEVER PLAYER TOUCHES -----*/
  const contactNormal = new CANNON.Vec3();
  const upAxis = new CANNON.Vec3(0, 1, 0);

  cannonBody.addEventListener('collide', function(e) {
    const contact = e.contact;

    /*----- CONTACT.BI & CONTACT.BJ ARE COLLIDING BODIES -----*/
    if (contact.bi.id === cannonBody.id) contact.ni.negate(contactNormal);

    /*----- CONTACT.NI IS COLLISION NORMAL -----*/
    else contactNormal.copy(contact.ni);

    if (contactNormal.dot(upAxis) > 0.5) canJump = true;
  });

  const velocity = cannonBody.velocity;
  const PI_2 = Math.PI / 2;

init: function () {
    var physics = this.el.sceneEl.components.physics;
    if (physics) {
      var position = (new CANNON.Vec3()).copy(this.el.getAttribute('position'));
      this.body = new CANNON.Body({
        shape: new CANNON.Sphere(this.data.radius),
        material: physics.material,
        position: position,
        mass: this.data.mass,
        linearDamping: this.data.linearDamping
      });
      physics.world.add(this.body);

      this.el.sceneEl.addBehavior(this);
    } else {
      this.el.sceneEl.addEventListener('physics-loaded', this.init.bind(this));
    }
  },
  update: function () { this.tick(); },