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