Logic for jumping in webgl with physics enabled - webgl

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