Logic for jumping in webgl with physics enabled

Question

Most important code just for example. Func UPDATE is called in every draw frame.

I want implement jumping virtualJumpActive == true logic.

I invert procedure for virtualJumpActive == true to make scene object and camera position set by cannonjs position but just in some short time.

My camera.posY follow fixed values for now.

I wanna only Y (for cannonjs Z / jumping ) to be navigated by physics and other XY to be navigated by camera (WASD user control)...

It is little intricate situation, i have 3 factors

• position of camera
• position of player (hands)
• position of player collision object

In normal regime player collision object follow camera and player.

In jump moment i wanna apply by vertical force and make camera follow collision object. Also i wanna that always Y component depens on physics data. In that way i will have jumping on top of other objects.

        var playerUpdater = {
          UPDATE: () => {
            App.scene[objName].rotation.rotateY(
              matrixEngine.Events.camera.yaw + 180)

            var detPitch;
            var limit = 2;
            if(matrixEngine.Events.camera.pitch < limit &&
              matrixEngine.Events.camera.pitch > -limit) {
              detPitch = matrixEngine.Events.camera.pitch * 2;
            } else if(matrixEngine.Events.camera.pitch > limit) {
              detPitch = limit * 2;
            } else if(matrixEngine.Events.camera.pitch < -(limit + 2)) {
              detPitch = -(limit + 2) * 2;
            }

            if(matrixEngine.Events.camera.virtualJumpActive == true) {

              // invert logic
              // Scene object set
              App.scene[objName].rotation.rotateX(-detPitch);
              var detPitchPos = matrixEngine.Events.camera.pitch;
              if(detPitchPos > 4) detPitchPos = 4;

              App.scene[objName].position.setPosition(
                App.scene.playerCollisonBox.physics.currentBody.position.x,
                App.scene.playerCollisonBox.physics.currentBody.position.z,
                App.scene.playerCollisonBox.physics.currentBody.position.y
              )

              // Cannonjs object set
              // Switched  Z - Y
              matrixEngine.Events.camera.xPos = App.scene.playerCollisonBox.physics.currentBody.position.x;
              matrixEngine.Events.camera.zPos = App.scene.playerCollisonBox.physics.currentBody.position.y;
              matrixEngine.Events.camera.yPos = App.scene.playerCollisonBox.physics.currentBody.position.z;

              // App.scene.playerCollisonBox.
              //   physics.currentBody.velocity.set(0, 0, 0);

              App.scene.playerCollisonBox.
                physics.currentBody.angularVelocity.set(0, 0, 0);

              setTimeout(() => {
                matrixEngine.Events.camera.virtualJumpActive = false;
                matrixEngine.Events.camera.virtualJumpY = 2; 
              }, 350);

            } else {

              // Scene object set
              App.scene[objName].rotation.rotateX(-detPitch);
              var detPitchPos = matrixEngine.Events.camera.pitch;
              if(detPitchPos > 4) detPitchPos = 4;
              App.scene[objName].position.setPosition(
                matrixEngine.Events.camera.xPos,
                matrixEngine.Events.camera.yPos - 0.3 + detPitchPos / 50,
                matrixEngine.Events.camera.zPos,
              )

              // Cannonjs object set
              // Switched  Z - Y
              App.scene.playerCollisonBox.
                physics.currentBody.position.set(
                  matrixEngine.Events.camera.xPos,
                  matrixEngine.Events.camera.zPos,
                  matrixEngine.Events.camera.yPos);
              App.scene.playerCollisonBox.
                physics.currentBody.velocity.set(0, 0, 0);
              App.scene.playerCollisonBox.
                physics.currentBody.angularVelocity.set(0, 0, 0);
            }

          }
        };

.full {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

<object class="full" data="https://fps-matrix-engine.vercel.app"/>

Any suggestion ?

More data:

Stackoverflow Question ref code => https://codepen.io/zlatnaspirala/pen/eYKrmdM?editors=0010

Source code github

Last update https://fps-matrix-engine.vercel.app