GoogleEarth-like controls for Three.js

Question

I've tried unsuccessfully (because of my poor 3D geometry understanding and unfortunate lack of time to dig in) to build a GoogleEarth-like controls for three.js. Maybe someone can help me, or might already have it. Anyways, i think it would be an excellent addition to three.js library.

Here's the specific functionality I am trying to build:

1. Zoom in with mouse wheel TO MOUSE CURSOR
2. Rotate around the scene by holding down Shift
3. Pan by pressing left mouse button.
4. As a bonus: show a little target icon during 1 and 2 operations above.

I have most trouble with 1, and haven't attempted 2. Panning is easy (there are lots of examples).

Right now I am unable to zoom into the scene so that it stays fixed under the cursor (so I can point at the top right corner of the screen, zoom-in and still see what I had under the cursor).

My thanks in advance, Alex

Answer 1

I've implemented something similar in a past life. I assume here that you are interacting with a flat plane; conversion of these techniques to a plane tangent to a sphere is left as an exercise for the reader. ;)

Zoom in with mouse wheel TO MOUSE CURSOR

To do this, you'll want to cast a ray into the scene, and note where it hits. You'll then want to translate the eye point of the camera towards that intersection. To feel "correct", you'll want some kind of proportional zoom in instead of fixed steps--for example, each zoom step reduces the distance from the current eye point to the target by 20%, instead of just moving 20 units. This will automatically slow down the camera as it approaches.

Rotate around the scene by holding down Shift

One you hold shift, you'll want left and right mouse movements to orbit about your view point. To do this, you'll need to yaw about an axis perpendicular to your point of intersection. You'll cast a ray into the scene (once shift is held down), note the intersection point, and then rotate your camera's eye point about that axis. Note that you'll need also to reorient the camera to continually point towards that intersection as you rotate, or perhaps to have the eye direction rotate to keep a constant angle with the vector from the eye point to the intersection axis.

Pan by pressing left mouse button.

You simply need to get the eye right vector and eye up vector, and move in the appropriate direction (multiply the mouse dx/dy with the normalized eye right/eye up, and multiply by the timestep for framerate independent movement).

As a bonus: show a little target icon during 1 and 2 operations above.

At the intersection in the scene, add a little object. Once you exit a mode, remove the object.

Answer 2

for your first question you can use this program under mouse wheel

mousewheel = function (event) {
event.preventDefault();
var factor = 15;
var mX = (event.clientX / jQuery(THREE_STUFF.container).width()) * 2 - 1;
var mY = -(event.clientY / jQuery(THREE_STUFF.container).height()) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.1);
vector.unproject(camera);
vector.sub(camera.position);
if (event.deltaY < 0) {
camera.position.addVectors(camera.position, vector.setLength(factor));                       trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
} else {
camera.position.subVectors(camera.position, vector.setLength(factor));                        trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));
}
}

I hope this will help you sure.