I setted basic camera rotation, but when rotate a bit, screen turn into black, and nothing showing, how to fix?

Help & Support
1

Editor Link PlayCanvas | HTML5 Game Engine
I have Entity Called Player
Childs Have:

  1. 3d object of capsule with represent as player.
  2. Camera Object.
    On Camera Object i have script attached with such data
var CameraController = pc.createScript('cameraController');
CameraController.attributes.add('sensetivityX', { type: "number", default: 1 });
CameraController.attributes.add('sensetivityY', { type: "number", default: 1 });


// initialize code called once per entity
CameraController.prototype.initialize = function () {

    this.eulers = this.entity.getEulerAngles();

    this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
};


CameraController.prototype.update = function (dt) {

    this.entity.setLocalEulerAngles(this.eulers.y, this.eulers.x, 0);

};


CameraController.prototype.onMouseMove = function (event, dt) {

    let mouseX = event.x * dt * this.sensetivityX;
    let mouseY = event.y * dt * this.sensetivityY;

    this.eulers.x -= mouseY;
    this.eulers.y += mouseX;

    this.eulers.x = pc.math.clamp(this.eulers.x, -90, 90);
};

CameraController.prototype.onMouseDown = function (mouseEvent) {
    this.app.mouse.enablePointerLock();
};
2

The mouse move event does not pass dt so it is undefined.

So this:

let mouseX = event.x * dt * this.sensetivityX;

Becomes

let mouseX = event.x * undefined * this.sensetivityX;

And mouseX becomes NaN and camera rotation is corrupted.

Not sure why you need the last update time here and not just do:

let mouseX = event.x * this.sensetivityX;
1 Like
3

Yep, i just watched unity tutorial, and there have this multiply on time delta, and since i saw the dt parameter, i replace it, checking dev tools and have no any error.

4

Can you help me please, what i’m make wrong from playcanvas tutorial First Person Movement | Learn PlayCanvas
Since when i try to move my mouse, it rotates like 1000 times like, editor is same. PlayCanvas | HTML5 Game Engine

5

The FPS tutorial has the following code:

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

It uses e.dx which is the number of pixels moved since the frame. You are using e.x which is the position of the cursor.

1 Like
6

Thanks a lot, how to understand such things by yourself, like the e.dx, cause i saw the def event listener and it get the event, that’s why i used that, mb there have some intro into such things, cause from start got in some such stupid things like this in post

7

The API docs is usually the first place to start.

In the initialise function, you are listening to the mouseMove event on the Mouse object

API reference: Mouse | PlayCanvas API Reference

image
image1240×340 19.4 KB

This link shows that when you listen to this event, this is the data you get:

FirstPersonMovement.prototype._onMouseMove = function (e) {

Where e is a MouseEvent object.

And you can see what properties you can access on that object here on the MouseEvent page: MouseEvent | PlayCanvas API Reference

1 Like