Zoom To Object In Threejs

Where can I change the zoom direction in three.js? I would like to zoom in the direction of the mouse cursor but I don't get where you can change the zoom target.

Solution 1:

updated wetwipe's solution to support revision 71 of Three.js, and cleaned it up a little bit, works like a charm, see http://www.tectractys.com/market_globe.html for a full usage example:

mX = ( event.clientX / window.innerWidth ) * 2 - 1;
mY = - ( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 1 );
vector.unproject(camera);
vector.sub(camera.position);
camera.position.addVectors(camera.position,vector.setLength(factor));
controls.target.addVectors(controls.target,vector.setLength(factor));

Solution 2:

OK! I solved the problem like this...just disable the zoom which is provided by THREEJS.

controls.noZoom = true;

$('body').on('mousewheel', function (e){

        var mouseX = (e.clientX - (WIDTH/2)) * 10;
        var mouseY = (e.clientY - (HEIGHT/2)) * 10;

        if(e.originalEvent.deltaY < 0){ // zoom to the front
            camera.position.x -= mouseX * .00125;
            camera.position.y += mouseY * .00125;
            camera.position.z += 1.1 * 10;
            controls.target.x -= mouseX * .00125;
            controls.target.y += mouseY * .00125;
            controls.target.z += 1.1 * 10;
        }else{                          // zoom to the back
            camera.position.x += mouseX * .00125;
            camera.position.y -= mouseY * .00125;
            camera.position.z -= 1.1 * 10;
            controls.target.x += mouseX * .00125;
            controls.target.y -= mouseY * .00125;
            controls.target.z -= 1.1 * 10;
        }
});

I know it's not perfect...but I hop it will help you a little bit....anyway...I'll work on it to make it even better.

Solution 3:

So I recently ran into a similar problem, but I need the zoom to apply in a broader space. I've taken the code presented by Niekes in his solution, and come up with the following:

container.on('mousewheel', function ( ev ){

        var factor = 10;

        varWIDTH = window.innerWidth;
        varHEIGHT = window.innerHeight;

        var mX = ( ev.clientX / WIDTH ) * 2 - 1;
        var mY = - ( ev.clientY / HEIGHT ) * 2 + 1;

        var vector = newTHREE.Vector3(mX, mY, 1 );
        projector.unprojectVector( vector, camera );
        vector.sub( camera.position ).normalize();

        if( ev.originalEvent.deltaY < 0 ){
            camera.position.x += vector.x * factor;
            camera.position.y += vector.y * factor;
            camera.position.z += vector.z * factor;
            controls.target.x += vector.x * factor;
            controls.target.y += vector.y * factor;
            controls.target.z += vector.z * factor;
        } else{
            camera.position.x -= vector.x * factor;
            camera.position.y -= vector.y * factor;
            camera.position.z -= vector.z * factor;
            controls.target.x -= vector.x * factor;
            controls.target.y -= vector.y * factor;
            controls.target.z -= vector.z * factor;
        }
});

Its not pretty, but is at least functional. Improvements are welcome :)

Solution 4:

Never heard of zoom direction,

you might want to inspect the FOV parameter of the camera,

as well as call this to apply the change:

yourCam.updateProjectionMatrix();

Solution 5:

If you are using trackball controls,set

trackBallControls.noZoom=true;

and in mousewheel event use this code,

mousewheel = function (event) {

            event.preventDefault();
            var factor = 15;
            var mX = (event.clientX / jQuery(container).width()) * 2 - 1;
            var mY = -(event.clientY / jQuery(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));
                Camera.updateProjectionMatrix();
            } else {
                Camera.position.subVectors(Camera.position, vector.setLength(factor));
                trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));

            }

        };