Zooming in three.js

Questions
1

I want to zoom in the direction of mouse cursor so that i can zoom particular object from the large number of objects in scene.

Thanks
Raman

2

What have you tried so far?

3

Hi,
I can able to zoom the object but from the center of the screen.

function onmousewheelchange(e) {
    if(e.wheeldelta>0)
     {
     camera.position.z -= 100;
     }
     else
     {
     camera.position.z += 100;
    }
}

but i want to zoom in the direction of mouse cursor.
Thanks
Akshay.

1 Like
4

Do you want to point the camera to face the mouse cursor as well as zoom?

5

So you will want to calculate the direction of the vector towards where the mouse is.
Try starting with the following code to calculate the direction, you may need to adjust it for your own needs.

var vector = new THREE.Vector3();
var dir = new THREE.Vector3();
var position = camera.position;

var rect = canvas.getBoundingClientRect();
var left = event.clientX - rect.left;
var top = event.clientY - rect.top;

camera.updateMatrixWorld( true );
vector.set((left/rect.width)*2 - 1, -(top/rect.height)*2 + 1, 0.5);
vector.unproject(camera);

var dir = vector.sub(position).normalize();

then you will want to move in this direction:

// scalar being the amount you want to move
camera.position.x += dir.x * scalar;
camera.position.y += dir.y * scalar;
camera.position.z += dir.z * scalar;
6

Yes looeee,can U Help With Any Examples?

7

I tried your code but its giving scalar is undefined.can you please this part I am new to threejs