如何触发鼠标滚轮事件？

Question

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

现在我想为鼠标滚轮设置一个事件。当缩放我当前的 WebGL 块对应的地图位置时，它可以缩放 in/out（使用内联块）用于地图和 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. You can find a working example here。

Answer 2

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

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

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

如何触发鼠标滚轮事件？

How to trigger an event onMousewheel?

javascript

mousewheel

three.js