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

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

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

So this:

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


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

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.

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

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

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

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

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