Control a FPS player with Cannon

Recommended Posts

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

    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);

    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();
        let vecRight = BABYLON.Vector3.TransformCoordinates(vecFront, m);
        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();
        let vecLeft = BABYLON.Vector3.TransformCoordinates(vecFront, m);
        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 by JBP
Bad colors

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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


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.

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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

hero.physicsImpostor.physicsBody.fixedRotation = true;


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 :):D 

Thanks for all the help !!

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.