CODEWITHSUNDEEP
three.js
Aasha joney
Aasha joney

Reputation: 546

zooming based on the position of cursor in mousewheel

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.

Upvotes: 4

Views: 2226

Answers (1)

Aasha joney
Aasha joney

Reputation: 546

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();
            }
        }

Upvotes: 1

Related Questions