zooming based on the position of cursor in mousewheel

Question

I am currently working on a THREE.js project.While using trackball control zooming it is zooming relative to the center of the model.But i want to zoom according to the position of cursor with mouse wheel.Any one who is familiar please help me over this. Thank you in advance.

http://stackoverflow.com/questions/5613718/click-to-zoom-in-webgl — gaitat, Aug 25 '16 at 20:17
Thank you @gaitat for your reference but can you guide me with THREE.js code. — Aasha joney, Aug 26 '16 at 03:51
The problem introduced by this is where to place the pivot point. The cursor position is in 2D space, the depth is undefined. There are some scripts around to implement this behavior using orbit controls, but from my own experience at the end it feels very weird. — Falk Thiele, Aug 31 '16 at 14:19

score 1 · Accepted Answer · answered May 26 '17 at 06:32

In mousewheel add this code which helps you in zooming based on the cursor position and not relative to the model.

If you are using trackball controls,you could use that for panning and rotating. So set trackball controls enabled to false in mousewheel.

    renderer.domElement.addEventListener('mousewheel',
           function (e) {
                mousewheel(e);
                        },
           false);


    function mousewheel(event) {
            trackBallControls.noZoom = true;
            event.preventDefault();
            var factor = 50;
            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.5);
            //console.log(vector);
            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));
                camera.updateProjectionMatrix();
            }
        }

zooming based on the position of cursor in mousewheel

1 Answers1