Camera to follow mouse without clicking

[Forble]

Hi,

 

I'm trying to replicate the camera movement from a typical FPS game. I want the camera to follow the player's mouse, without the need to click at all.

 

Here's what I've got so far:

var lastMove = 0;oldx = 0,oldy = 0,mousemovemethod = function (e) {    if(Date.now() - lastMove > 40) {        if (e.pageX < oldx) {            camera.rotation.y -= .1;        } else if (e.pageX > oldx) {            camera.rotation.y += .1;        }        if (e.pageY < oldy) {            camera.rotation.x -= .1;        } else if (e.pageY > oldy) {            camera.rotation.x += .1;        }        oldx = e.pageX;        oldy = e.pageY;        lastMove = Date.now();    }}document.addEventListener('mousemove', mousemovemethod);

The camera movement is rough and intermittent. I'd like it to be smooth with a bit of easing.

 

Here's a link to the full code: http://www.babylonjs-playground.com/#WM1VE

 

My question:

 

1. How can I smooth out the rotation code above, or is there a better way?

 

Solution:

 

1. 
   

   camera.cameraRotation.ycamera.cameraRotation.x

 

cameraRotation provides the smooth transition I was looking for.

[Wingnut]

Hey Forble, welcome to the forum!  Thanks for the info about your solution.

 

Were you able to get the easing you wanted? 

 

For one demo, I used some invisible panels along the edges of the canvas... to "ped" (raise/lower) and "truck" (side-slide) a free camera.

 

See this post.  http://www.html5gamedevs.com/topic/14004-problems-with-a-camera-and-models/#entry79962

 

It didn't do easing, but it works ok just the same.  Our follow camera does some easing, but I haven't studied it very well or used it very often.  Notice at the top of that page... that the followCamera (and freeCamera) 'extends' targetCamera, but you probably know this, because you already found camera.cameraRotation.

 

Anyway, I was sad to see that nobody responded to your post, so I wanted to check with you and see if you wanted to try some easing.

 

There are also some other fancy solutions available.  If you feel so inclined, take a look at http://www.html5gamedevs.com/topic/18496-modify-mesh-in-a-particular-viewport/#entry108130

 

It talks about car moving instead of camera moving... but the post talks about a continuous "adjuster" that runs inside the scene's render loop.  This TYPE of solution could work for you, too.  Essentially, inside the render loop, a value... possibly called cameraRotationOffset... is constantly added to the rotation of the camera.  This global variable holds values between -.1 and +.1 (for example).  Again, that value is constantly being added to camera rotation IF the mouse pointer is left or right of canvas center.  This would allow you to have a dead-zone in the middle of the screen... much like the "edges of the screen panning" seen in the first linked forum post.

 

Your mousemovemethod would no longer actually move the camera.  Instead... it would set that global cameraRotationOffset variable to...

 

-.1 if mouse is located SOME amount of pixels to the left of the canvas center.

+.1 if mouse is located SOME amount of pixels to the right of the canvas center.

0 if mouse is located at or near the center of the canvas.

 

The render loop (the function used in scene.registerBeforeRender) would be constantly adding that global variable... to the camera rotation.  IT does the camera moving, based on what it sees when it checks the cameraRotationOffset variable.

 

I haven't had any morning coffee yet, but maybe another user will make us or show us a demo scene... that uses this method.  Or maybe you understand this idea perfectly, and there's no need for demos.  And maybe, I'll make one a bit later when my brain starts working. 

 

AND... there's another solution, too.  Babylon Animation.  There, we pick up the many powerful easing functions that are available to Animation class objects.  But those easing functions might be available even without using Animation class objects.  We'd need to study it.

 

Again, sorry for the slow response, and I hope this helps.  I just wanted to say hi and let you know about some other options, in case you want to explore them.  Be well, and again, welcome aboard the forum!  Good to have you with us.

 

PS:  It is often wise to REMOVE event listeners in a function called scene.onDispose.  Check out http://www.babylonjs-playground.com/#1273GZ#7 .  Near the bottom, you will see the scene.onDispose removing event listeners.  Just thought I'd tell you.    Bye again.

[Monire]

hi 

your solution is not clear can you post a playground with solution please?