I'm trying to create a browser moba like game using three.js. I have made the movement using wasd and the player rotation follows the mouse. The technique i used for the rotation of the player is raycasting on 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 increse preformance of the game, should i create a worker thread for the raycasting, use other movement technique (eg. right click to move). What is your reccomendation?

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