Search code examples
three.jsmousewheelorbitcontrols

How to write a custom mouse wheel event handler in OrbitControls?

I'm working on a WebGL application using ThreeJS and OrbitControls. How do I write and make use of a custom event handler for wheel spin events?

Suppose my custom handler is

function custom_handleMouseWheel(event) { ... }

I tried adding it as a listener:

window.addEventListener("wheel", custom_handleMouseWheel);

but I suspect this adds my handler to a list of existing handlers (probably only one), and I'd have to remove the original handler. Not sure how to do that. And anyway, my handler never was called, which I checked for by adding a console.log("Wheel!") line to my handler.

Another thing I tried is to replace the handleWheelMouse method in the controls object, like this:

let original_handleMouseWheel;

function custom_handleMouseWheel(event) {
  console.log("Custom Wheel!");
  ... fancy geometry calculations ...
  original_handleMouseWheel(event);
}

// somewhere after defining scene, camera, renderer, etc...
controls = new THREE.OrbitControls( camera );
original_handleMouseWheel = controls.handleMouseWheel;
controls.handleMouseWheel = custom_handleMouseWheel;

but again the console.log line never executes.

What is the right way to go about doing this?

Solution

  • Just setting controls.enableZoom = false will stop the default zoom.
    The default "wheel" listener is added to the "domElement" which should be the second parameter sent to the OrbitControls constructor.
    Try renderer.domElement.addEventListener('wheel', custom_handleMouseWheel);