How do you avoid lag with Three.js and mousemove?

Question

I'm trying to create a browser moba-like game using three.js. I'm using WASD for movement and the player rotation follows the mouse with mousemove then lookAt() the intersection.

The problem:

As I start to move the mouse rapidly and doing other stuff like movement or shooting the game starts to lag and slow noticeably.

How can I increase performance of the game, should I create a worker thread for the raycasting, use other movement technique (e.g. right click to move). What is your recommendation?

var mouseCallback = function(e){
  if(e.clientX >= renderer.domElement.clientWidth-2){
    mouse.x = 1;
  } else {
    mouse.x = ( e.clientX / renderer.domElement.clientWidth ) * 2 - 1;
  }
  if(e.clientY >=  renderer.domElement.clientHeight-2){
    mouse.y = -1;
  } else {
    mouse.y = - ( e.clientY / renderer.domElement.clientHeight ) * 2 + 1;
  }
  if(player){
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObject( terain );
    var direction;

    for(var i = 0; i< intersects.length;i++){
      direction = intersects[0].point;
    }

    if(direction){
      var focalPoint = 
        new THREE.Vector3(
            direction.x,
            player.position.y,
            direction.z
            );
      player.lookAt(focalPoint);
    }
  }
}

Answer 1

I suggest that you don't directly couple browser-input-events to your game-logic. I would do something like this:

In your mousemove event-handler, read the current screen position and store it as a variable.

In your game-update loop, get the latest mouse-position (the variable you stored previously) and calculate the players looking direction there.

The general idea is to handle the mouse-events as quickly as possible (do not perform costly operations in the event-handler). And most importantly: Don't alter the game-state in your mouse-handler, since all this is redundant until the next frame gets rendered. So you better update the game state once, just before rendering the next frame (in your game-update loop).

Update: Keeping the current mouse-position as a variable is the most basic way to solve this. This might be good enough for something like the mouse-position but bad for keyboard-events (where you might get more than one in-between a single update). The solution to this would be input-buffers where you keep a list of the events that occurred and process the list in your next update.

Answer 2

Why do you need to use ray casting?

Simply get the direction vector (vector between actor and mouse pointer) and have the character face that direction. If it's in 3d you might need to convert from screen to world coordinates.

If you want more detailed answer you should provide some code.