[SOLVED] Third person and first person camera switch using raycastendpoint

Help & Support
1

Hi there, I’m trying to code a switch from third to first person camera view, the camera uses raycastendpoint and it is attached to a player, my plan is to change raycast Z position ( as close to player as possible) and set the player model to invisible so it looks like it is first person, the problem persists when I move from 0,0,0 location, other times it works as it should

 if(app.keyboard.wasReleased(pc.KEY_X) ){
          rayEnd = this.app.root.findByName('RaycastEndPoint');
          var pos2 = this.player.getPosition();
          rayEnd.setPosition(pos2.x, pos2.y, pos2.z = 0.01);
          console.log(pos2);

Maybe there’s better ways? multiple camera?
Full codes if needed

var CameraMovement = pc.createScript('cameraMovement');

CameraMovement.attributes.add('mouseSpeed', { type: 'number', default: 1.4, description: 'Mouse Sensitivity' });

// Called once after all resources are loaded and before the first update
CameraMovement.prototype.initialize = function () {

    this.eulers = new pc.Vec3();
    this.touchCoords = new pc.Vec2();

    var app = this.app;
    app.mouse.on("mousemove", this.onMouseMove, this);
    app.mouse.on("mousedown", this.onMouseDown, this);

    this.rayEnd = app.root.findByName('RaycastEndPoint');
    
    this.on('destroy', function() {
        app.mouse.off("mousemove", this.onMouseMove, this);
        app.mouse.off("mousedown", this.onMouseDown, this);
    }, this);
};
    
CameraMovement.prototype.postUpdate = function (dt) {
    var originEntity = this.entity.parent;
    
    var targetY = this.eulers.x + 180;
    var targetX = this.eulers.y;

    var targetAng = new pc.Vec3(-targetX, targetY, 0);
    
    originEntity.setEulerAngles(targetAng);
                   
    this.entity.setPosition(this.getWorldPoint());
    
    this.entity.lookAt(originEntity.getPosition());
};

CameraMovement.prototype.onMouseMove = function (e) {
    if (pc.Mouse.isPointerLocked()) {
        this.eulers.x -= ((this.mouseSpeed * e.dx) / 60) % 360;
        this.eulers.y += ((this.mouseSpeed * e.dy) / 60) % 360;

        if (this.eulers.x < 0) this.eulers.x += 360;
        if (this.eulers.y < 0) this.eulers.y += 360;
    }
};

CameraMovement.prototype.onMouseDown = function (e) {
    this.app.mouse.enablePointerLock();
};

CameraMovement.prototype.getWorldPoint = function () {
    var from = this.entity.parent.getPosition(); 
    var to = this.rayEnd.getPosition();

    var hitPoint = to;

    var app = this.app;
    var hit = app.systems.rigidbody.raycastFirst(from, to);
    
    return hit ? hit.point : to;
};
2

Hi @Newbie_Coder! What do you do here?

3

Moving raycast closer to the player, as by default it’s position is 0,0,4.43

Maybe there is a better way for it, attaching new camera to player and using it? Tried some 2 camera examples with enable/disable, but it fails as this one is different due to raycast

4

You have to move the Camera enity and the RaycastEndPoint entity. But they need to be behind the Player entity (Z axis more then 0), otherwise your movement doesn’t work as expected anymore. You can also disable the Model entity.

5

Okay, I got this, few tweaks and changes left to do

 if(app.keyboard.wasReleased(pc.KEY_F) ){
          rayEnd = this.app.root.findByName('RaycastEndPoint');
          var pos2 = this.player.getPosition();
          rayEnd.setPosition(pos2.x, pos2.y, pos2.z);
          console.log(pos2);
 }

  if(app.keyboard.wasReleased(pc.KEY_G) ){
          rayEnd3rd = this.app.root.findByName('RaycastEndPoint3rd');
          var pos3rd = rayEnd3rd.getPosition();
          rayEnd.setPosition(pos3rd.x, pos3rd.y, pos3rd.z);
 }

How it works: Duplicated and disabled one raycast so I can get position cords anytime, since I’m changing original ray position while setting to first person, I needed a way to get original cords, sort of play-around lol. thanks for the help and see you soon

6

Another little issue
After setting the raycast pos, camera viewing angle get’s lost so i have to use my mouse to point it at the “normal” viewing angles, even if i set the camera position to look in the center with a script, it still randomizes after I move my mouse

Do i need to reset something? seems like the view is binded to user’s mouse so this happens

7

Check this. Since you use the player position, you probably no longer meet this requirement. If that is indeed the cause, you can probably solve it with the line below.

rayEnd.setPosition(pos2.x, pos2.y, pos2.z + 0.01);
8

Thanks, had to play with eulers in my case

this.cameraScript.eulers.y = 90;

Trying to position camera and ray closer to player’s head, but weird thing happens, seems like Y axis acts like Z, why is that?

10

Can you share a project link so we can take a look?

11

Just found parent element called camera axis and changed its pos, I’m working on a basic 3rd movement scene, last question before marking it as solved, is there any way to prevent view angle to minus directions? (I mean when you look close to the ground or sky and the view switches to other side?

12

I’m not sure if I understand you correctly, but maybe the topic below can help you with this.

https://forum.playcanvas.com/t/how-do-i-limit-my-first-person-camera-view/

1 Like
13

We can mark this as solved, Thank you Albertos

1 Like