I am trying to use the mouse to rotate my view. The math is simple: Y movement generates a change in latitude (the X-axis) and X movement generates a change in longitude (the Y-axis). I have created a listener which detects mouse movement.
I am not moving the camera directly. Instead, I am moving an object around the center and tracking it with the camera, so the result should be about the same.
The problem I am having is that X movement appears to be limited. I can only perform a few rotations in either direction before I hit a “wall”. I assume that what is happening is that the mouse is traveling the entire width of the page and when it hits the end, it stops.
Is there a way to avoid this limitation?
If I could use the three.js controls routines, that would be great. However, I want to do two different things: (1) if a mouse button is not pressed, I want to do the above, and (2) if a mouse button is pressed, I want to switch to simply rotating the camera around the center.
Thanks for the reply. I can put together a brief example.
In the meantime, a simple explanation may help. The typical rotation is activated by pushing down a mouse button and moving the mouse pointer. As long as the button is held down, the change in mouse pointer position is used to compute some program variable (e.g. rotate an object to the right). Assume that you have moved the mouse pointer all the way to the edge of the screen (e.g. all the way to the right) and that you want to continue rotating the object (to the right). In this case, you can simply release the mouse button and move the mouse (pointer) back to the starting position (e.g. all the way to the left). This does not affect the program variable, because that variable is changed only when the button is pressed. This is a “free” move.
In my case, I do not have the option of a “free” move because I am using the mouse button for “double duty”. When the mouse button is down, the mouse movement is rotating the camera. When the mouse button is up, the mouse movement is rotating an object. As a result, when the mouse pointer hits the edge of the screen, the camera or object can rotate no further.
So what I need is some way to remove the screen limits on mouse pointer movement. For example, it would be helpful to find a way to read the raw mouse device changes directly. Or if I could keep reading the mouse changes and resetting the mouse cursor back to the center of the screen after each read. As far as I know, neither is an option.
I have done a bit more research online and one option appears to use something called “pointer lock”, where the position of the mouse is locked to the center of the screen. However, as far as I can tell, this is not available in three.js and is a bit experimental.
I misspoke. Now that I know that a term for what I am looking for is called “pointer lock”, I searched and found that pointerlock.js is part of the three.js controls library.
I think he means setPointerCapture and releasePointerCapture, if the mouse is captured, going out of the browser (while the mouse is pressed) will not interrupt motion. I also noticed this behaviour in the controls and consider it a bug because the interaction actually breaks (if the mouse button is lifted while out of the browser and the mouse comes in again, controls think it’s still pressed, which then causes weird behaviour).
But it sounds like they are able to capture? Is this an option?
Yep, that’s the one.
Now, I just have to figure out if it will also allow me to use the mouse button to change the variable that is affected, e.g., mouse up, I rotate (which it does); and mouse down, I orbit the object.
Here is the program that I am working on: Skye Fly
You can use the mouse (no buttons down) to move the blue target indicator which will “steer” the aircraft. You can also use the mouse (button down) to rotate around the aircraft. The steering part needs some tweaking (the auto steer is causing some oscillations).
The easiest way to illustrate the problem is to hold the mouse button down and rotate around the aircraft as far as you can go in either direction. It does not take long to hit a point where you cannot rotate further.
The PointerLock appears to eliminate this limitation and works with the mouse (no buttons down) to steer the aircraft. I am hoping that I PointerLock will also allow me to use the mouse (button down) to rotate around the aircraft.