如何在鼠标滚轮上触发事件

How to trigger an event onMousewheel?

本文关键字：事件 鼠标      更新时间：2023-09-26

我正在开发一个WebGL应用程序。例如，我有一个球体对象，它使用"放大/缩小"的轨道控制。

现在我想为鼠标滚轮设置一个事件。当缩放我当前的WebGL块对应的地图位置时，可以放大/缩小（使用内联块）地图和WebGL。但问题是，首先，当我使用鼠标滚轮时，我的事件会被触发。我还想知道我的事件逻辑是否正确。

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

您可以像这样使用wheel事件。

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

这将导致每次鼠标滚轮滚动文档时都会出现控制台日志。MouseWheel事件的deltaX和deltaY属性对于准确计算用户滚动了多少以及向哪个方向滚动尤其有用。

要使用的事件是轮子。你可以在这里找到一个工作示例。

相关文章：