CODEWITHSUNDEEP
javascriptthree.jsmousewheel
sravan
sravan

Reputation: 35

How to trigger an event onMousewheel?

I am developing a WebGL application. For example, I have a sphere object that uses orbit controls for Zoom in/out.

Now I want to setup an event for the mousewheel. When zooming on my current WebGL block corresponding map location it can be zoomed in/out (used inline-block) for maps and WebGL. But the problem is that first of all my event is being triggered when I use the mousewheel. I also want to know whether my event logic is correct or not.

root.addEventListener('mousewheel', mousewheel, false); 

function mousewheel(event) {
    var mX = (event.wheeldetailX/width)* 2 - 1;
    var mY = (event.wheeldetailY/height)* 2 + 1;

    var WebGLZoom = new THREE.Vector3(mX, mY, 1);
    var raycaster = new THREE.Raycaster();

    raycaster.setFromCamera(WebGLZoom, camera);
    WebGLZoom.sub(camera.position);

    var mapzoom = map.getZoom();

    if (WebGLZoom.z <= 5 && WebGLZoom.z > 2) {          
        map.setZoom(17);
    } else if (WebGLZoom.z <= 2 && WebGLZoom.z > 0.0) {     
        map.setZoom(19);
    } else {                
        map.setZoom(14);
    }                               
}

Upvotes: 2

Views: 1371

Answers (2)

GMchris
GMchris

Reputation: 5658

You can use the wheel event like so.

document.addEventListener('wheel', function(event){
    console.log(event.deltaY);
}, false);

This will result in a console log every time your mousewheel scrolls over the document. The deltaX and deltaY properties of the MouseWheel event are especially useful to figure out exactly how much the user scrolled and in which direction.

Upvotes: 1

Dave Draper
Dave Draper

Reputation: 1845

The event to use is wheel. You can find a working example here.

Upvotes: 0

Related Questions