イベントをマウスホイールでトリガーする方法は？

Question

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

Answer 1

あなたはwheelイベントを使用することができます。

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

これにより、マウスホイールがドキュメント上をスクロールするたびにコンソールログが表示されます。 MouseWheelイベントのdeltaXとのプロパティは、ユーザーがスクロールした量と方向を正確に把握するのに特に便利です。

Answer 2

使用するイベントはwheelです。あなたは実例hereを見つけることができます。