I am currently working on a WebGL application where I have a sphere object that utilizes orbit controls for zooming in and out.
My goal is to set up an event for the mousewheel so that when I zoom on the WebGL block, the corresponding map location also zooms in or out. The issue I am facing is that my event is triggered as soon as I use the mousewheel. I am unsure if my event logic is correct and would like some feedback.
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);
}
}