javascript - 如何触发鼠标滚轮事件？

Question

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

现在我想为鼠标滚轮设置一个事件。当放大我当前的 WebGL block 对应的 map 位置时，它可以放大/缩小(使用内联 block ) map 和 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);
    }                               
}

Answer 1

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

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

每次您的鼠标滚轮在文档上滚动时，都会产生一个控制台日志。 MouseWheel 事件的 deltaX 和 deltaY 属性对于确定用户滚动的准确程度和方向特别有用。