Click and zoom like google earth

Hi I’m using perspective camera and orbit control trying to double click and then zoom in like google earth. (It’s not like annotation which you know exactly where to move, just random click on anywhere)

I first have mouse click event listener and can find mouse position by:

var intersects = raycaster.intersectObjects(sceneObjects, true);
                if (intersects.length > 0) {
                    var p = intersects[ 0 ].point;

I think this intersects[ 0 ].point is camera position? but then how to find target position for camera to move accurately?

for moving I use Tween.js or setLookat() from camera-control it’s not a problem, the key is how to find camera position and target position? unless it doesn’t have to have these two points to achieve what I want.


intersects[ 0 ].point is new target

try using Vector3.lerpVectors

newCameraPosition.lerpVectors(camera.position, intersects[ 0 ].point, 0.5) should give you the midway point

Thanks for your reply, I’m a bit unclear about newCameraPosition which has lerpVectors methods. I guess it’s part of my question, how do you find new camera position?

const newCameraPosition=new THREE.Vector3() is a reusable vector3 used for calculation purpose

after performing the lerpVectors thing the x,y,z will be updated , you can animate your camera to that location

the docs contain everything you can do with a THREE.Vector 3

1 Like

Thank you so much! it works really well. Can I also ask why is new camera position the mid way of current camera position and target position? using vector3 lerp() never came cross my mind

You might like to check out my project here:

The technique that I used triggers a state machine triggers when the user approaches the Earth’s surface. A transition then occurs which changes the orbit controls target and up direction. Reverse transition is also supported. (Note: I had to customize orbit controls to add “up direction” support)