How to make a 360 FPS camera?

Help & Support
,
1

I am trying to make an FPS game but the camera that I put on players can’t get past the screens borders. I saw the FPS movement post but the player movements and camera controls are two different scripts in my game.

var CameraControl = pc.createScript('cameraControl');

// Settings
CameraControl.prototype.initialize = function () {
    this.pitch = 0;
    this.yaw = 0;
    this.sensitivity = 0.2;
    this.centerX = window.innerWidth / 2;
    this.centerY = window.innerHeight / 2;
    this.lastMouseX = this.centerX;
    this.lastMouseY = this.centerY;

    // Starting Direction
    var euler = this.entity.getLocalEulerAngles();
    this.pitch = euler.x;
    this.yaw = euler.y;

    // Locking Mouse with a Click
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);

    // Unlocking Mouse by pressing the ESC button
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);

    // Pointer Lock Status
    this.pointerLocked = false;

    // Follow the Mouse Movements
    this.onMouseMoveBind = this.onMouseMove.bind(this);
};

// Ask for Point Lock when clicked with Mouse
CameraControl.prototype.onMouseDown = function (event) {
    this.app.mouse.enablePointerLock();
    document.addEventListener('mousemove', this.onMouseMoveBind);
    document.body.style.cursor = 'none';
    this.pointerLocked = true;
};

// Follow Mouse Mevement
CameraControl.prototype.onMouseMove = function (event) {
    if (this.pointerLocked) {
        // Follow Mouse Positions and change Directions
        var movementX = event.clientX - this.lastMouseX;
        var movementY = event.clientY - this.lastMouseY;

        // Make Mouse still be able to go even when its hit a screen border
        this.yaw -= movementX * this.sensitivity; // Yaw right/left
        this.pitch -= movementY * this.sensitivity; // Pitch up/down
        this.pitch = pc.math.clamp(this.pitch, -89, 89); // Pitch borders

        // Save last Mouse positions
        this.lastMouseX = event.clientX;
        this.lastMouseY = event.clientY;
    }
};

// Show Mouse again when pressed ESC  button
CameraControl.prototype.onKeyDown = function (event) {
    if (event.key === pc.KEY_ESCAPE) {
        // Leave the Point Lock
        document.exitPointerLock();
        document.body.style.cursor = 'auto';
        this.pointerLocked = false;

        // Put Mouse at the center of the Screen or Leave it where it is
        this.lastMouseX = this.centerX;
        this.lastMouseY = this.centerY;
    }
};

// Apply Rotation to Camera
CameraControl.prototype.update = function (dt) {
    this.entity.setLocalEulerAngles(this.pitch, this.yaw, 0);
};

these are the codes thats in the Camera Control script.

2

Could you please provide the link to the PlayCanvas project? It would be easier for me and others to debug then. And also, I think you mean 360 degree camera so maybe adding it to the title would help others understand what you mean.

3

Maybe use this script and attach it to the player entity that you have.

const FirstPersonMovement = pc.createScript('firstPersonMovement');

FirstPersonMovement.attributes.add('camera', {
    type: 'entity',
    description: 'Optional, assign a camera entity, otherwise one is created'
});

FirstPersonMovement.attributes.add('power', {
    type: 'number',
    default: 2500,
    description: 'Adjusts the speed of player movement'
});

FirstPersonMovement.attributes.add('jumpImpulse', {
    type: 'number',
    default: 250,
    description: 'Adjusts the impulse of player Jump'
});

FirstPersonMovement.attributes.add('gravity', {
    type: 'number',
    default: 100,
    description: 'Adjusts the gravity'
});

FirstPersonMovement.attributes.add('raycastPlayerBase', {
    type: 'entity'
});

FirstPersonMovement.attributes.add('lookSpeed', {
    type: 'number',
    default: 0.25,
    description: 'Adjusts the sensitivity of looking'
});


FirstPersonMovement.prototype.initialize = function () {
    this.force = new pc.Vec3();
    this.eulers = new pc.Vec3();
    this.jumping = {
        state: false
    };


        var app = this.app;

    // Listen for mouse move events
    app.mouse.on("mousemove", this._onMouseMove, this);

    // when the mouse is clicked hide the cursor
    app.mouse.on("mousedown", function () {
        app.mouse.enablePointerLock();
    }, this);

    // Check for required components
    if (!this.entity.collision) {
        console.error("First Person Movement script needs to have a 'collision' component");
    }

    if (!this.entity.rigidbody || this.entity.rigidbody.type !== pc.BODYTYPE_DYNAMIC) {
        console.error("First Person Movement script needs to have a DYNAMIC 'rigidbody' component");
    }
};

//update code called every frame
FirstPersonMovement.prototype.update = function (dt) {
    // Photon Multiplayer Position var
    const pos = new pc.Vec3(0, 0, 0);


    // If a camera isn't assigned from the Editor, create one
    if (!this.camera) {
        this._createCamera();
    }

    var force = this.force;
    var app = this.app;

    // Get camera directions to determine movement directions
    var forward = this.camera.forward;
    var right = this.camera.right;


    // movement
    var x = 0;
    var z = 0;

    // Use W-A-S-D keys to move player
    // Check for key presses
    if (app.keyboard.isPressed(pc.KEY_A) || app.keyboard.isPressed(pc.KEY_Q)) {
        x -= right.x;
        z -= right.z;
        pos.x = -dt;
    }

    if (app.keyboard.isPressed(pc.KEY_D)) {
        x += right.x;
        z += right.z;
        pos.x = dt;
    }

    if (app.keyboard.isPressed(pc.KEY_W)) {
        x += forward.x;
        z += forward.z;
        pos.z = -dt;
    }

    if (app.keyboard.isPressed(pc.KEY_S)) {
        x -= forward.x;
        z -= forward.z;
        pos.z = -dt;
    }

    if (app.keyboard.wasPressed(pc.KEY_SPACE)) {
        if (this.jumping.state === false) {
            this.entity.rigidbody.applyImpulse(0, this.jumpImpulse, 0);
            this.jumping.state = true;
        }
    } else if (this.jumping.state === true) {
        // raycast down activation
        if (this._checkBelow() !== null) {
            this.jumping.state = false;
        }
        pos.y = -dt;
    }

    // use direction from keypresses to apply a force to the character
    if (x !== 0 || z !== 0) {
        force.set(x, 0, z).normalize().scale(this.power);
        this.entity.rigidbody.applyForce(force);
    }

    // update camera angle from mouse events
    this.camera.setLocalEulerAngles(this.eulers.y, this.eulers.x, 0);

    // Photon Multiplayer pos/Position Variable stuff
    if (!pos.equals(new pc.Vec3(0, 0, 0))) {
    this.entity.translate(pos);

    const { x, y, z } = this.entity.getPosition();
    this.app.fire("loadbalancing:sendPlayerPosition", { x, y, z });
}
};

FirstPersonMovement.prototype._onMouseMove = function (e) {
    // If pointer is disabled
    // If the left mouse button is down update the camera from mouse movement
    if (pc.Mouse.isPointerLocked() || e.buttons[0]) {
        this.eulers.x -= this.lookSpeed * e.dx;
        this.eulers.y -= this.lookSpeed * e.dy;
    }
};

FirstPersonMovement.prototype._createCamera = function () {
    // If user hasn't assigned a camera, create a new one
    this.camera = new pc.Entity();
    this.camera.setName("First Person Camera");
    this.camera.addComponent("camera");
    this.entity.addChild(this.camera);
    this.camera.translateLocal(0, 0.5, 0);
};

FirstPersonMovement.prototype._checkBelow = function() {
    return this.app.systems.rigidbody.raycastFirst(this.entity.getPosition(), this.raycastPlayerBase.getPosition());
};

You can also add a feature that would stop the camera from doing a 360 on the y axis but I will let you do this yourself.

Tell me if this worked for you or not.

4

Yea I think this would work. Thank you very much. :+1: