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.

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

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.

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

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.

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?

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.

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?

I can post some code if neccecary.

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