Control a FPS player with Cannon

[JBP]

Hello I am trying to develop a FPS using BabylonJS and CannonJS in TypeScript.

My first problem was what type of Impostor to use as the player, end up using a Cylinder with a FixedRotation = true.

Now I place the camera on top off the Cylinder on every frame, and apply Impulses to the Cylinder based on keyboard input, and camera target.

The algorithm that I came up is the flowing (hero = Cylinder):

scene.registerBeforeRender(function () {
    //Your code here
    //Step

    camera.position.x = hero.position.x;
    camera.position.y = hero.position.y + 1.0;
    camera.position.z = hero.position.z;

    let camFront = camera.getFrontPosition(1.0);

    let vecFront = camFront.subtract(camera.position);
    vecFront.normalize();           

    let finalVector = new BABYLON.Vector3(0.0, 0.0, 0.0);

    if (moveForward) {
        finalVector = finalVector.add(new BABYLON.Vector3(1.0 * vecFront.x, 0.0, 1.0 * vecFront.z));
    }
    if (moveBackward) {
        finalVector = finalVector.add(new BABYLON.Vector3(-1.0 * vecFront.x, 0.0, -1.0 * vecFront.z));
    }
    
    if (moveRight) {
        let q = BABYLON.Quaternion.RotationAxis(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(90));
        let m = new BABYLON.Matrix();
        q.toRotationMatrix(m);
        let vecRight = BABYLON.Vector3.TransformCoordinates(vecFront, m);
        vecRight.normalize();
        finalVector = finalVector.add(new BABYLON.Vector3(1.0 * vecRight.x, 0.0, 1.0 * vecRight.z));
    }

    if (moveLeft) {
        let q = BABYLON.Quaternion.RotationAxis(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(-90));
        let m = new BABYLON.Matrix();
        q.toRotationMatrix(m);
        let vecLeft = BABYLON.Vector3.TransformCoordinates(vecFront, m);
        vecLeft.normalize();
        finalVector = finalVector.add(new BABYLON.Vector3(1.0 * vecLeft.x, 0.0, 1.0 * vecLeft.z));
    }
                
    finalVector = finalVector.normalize();
    hero.physicsImpostor.applyImpulse(new BABYLON.Vector3(15.0 * finalVector.x, 0.0, 15.0 * finalVector.z), hero.getAbsolutePosition());

});

 Is there a more effective way to do this ?

Thanks in advance.

Edited September 7, 2016 by JBP
Bad colors

[Pryme8]

Search for TERIABLE infinity on the forums or magic marble editor demo

[JBP]

Uploaded a example to http://www.babylonjs-playground.com/#1AFY3M#0

The control works but the problem is that the camera/hero doesn't go straight forward all the time.

Example if at start I point at the Box at the top left if and only press 'W' it goes straight to the Box, but if I for example go straight 'W' for 1-5 seconds and then point at the Box and press 'W' the camera/hero doesn't go straight to the BOX, it goes sides ways.

Where is an example using THREE.JS and CANNON.JS of the kind of movement I want: http://javascriptjamie.weebly.com/bouncy-colorful-boxes-game.html

Can any one help me, or in alternative point me to and example First Person Example using BABYLON.JS and CANNON.JS.

Can any one help me, please.

I want to use BABYLON.JS for my projects.

[Pryme8]

It's how your calculating your forward and scaling it.  Agian look up TERIABLE specifically TERIABLE infinity or magic marble if you want to see a physics controller.  I've covered this topic several times and kinda burnt out explaining it now.

[JBP]

Thanks for the reply, and I sorry for insisting on this topic, but I copied the best I can the example you speak about:

https://github.com/Pryme8/TERIABLE/blob/gh-pages/Infinity/teriable-infinity-0.0.1.js

And updated the Playground http://www.babylonjs-playground.com/#1AFY3M#1 but still I can't get it to work correctly.

I'm sorry for being such a "pain in the ass" but I just can't figure this one out.

Thanks in advance.

[Pryme8]

You got everything working, it looks like you just need to recalculate the forward when the camera looks around and the player is holding forward or something.  Im saying this cause if you release forward and press it agian the sideways motion stops and you start going forward again.

and looking over your script im not sure whats causing it actually, if you look at the example at http://pryme8.github.io/TERIABLE/infinity.html
it does not happen... so yeah not sure, Id go through the before loop item by item and make sure your calculations are correct including the encapsulation.

[JBP]

Found the solution, the problem is not in BabylonJS the problem is  in this lines of code:

hero.physicsImpostor.physicsBody.fixedRotation = true;

hero.physicsImpostor.physicsBody.updateMassProperties();

I was creating a Cylinder and fixing the rotation so that the cylinder was always up, if remove these lines and replace the Cylinder with a Sphere starts to work  

Thanks for all the help !!