如何在 OrbitControls 中编写自定义鼠标滚轮事件处理程序？

Question

我正在使用 ThreeJS 和 OrbitControls 开发 WebGL 应用程序。如何编写和使用自定义事件处理程序来处理滚轮旋转事件？

假设我的自定义处理程序是

function custom_handleMouseWheel(event) { ... }

我尝试将其添加为侦听器：

window.addEventListener("wheel", custom_handleMouseWheel);

但我怀疑这会将我的处理程序添加到现有处理程序列表中（可能只有一个），我必须删除原始处理程序。不知道该怎么做。无论如何，我的处理程序从未被调用，我通过向我的处理程序添加 console.log("Wheel!") 行来检查。

我尝试的另一件事是替换控件对象中的 handleWheelMouse 方法，如下所示：

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;

但是 console.log 行再次从不执行。

执行此操作的正确方法是什么？

Answer 1

只需设置 controls.enableZoom = false 即可停止 default zoom。
默认的“wheel”侦听器是“domElement”的added，它应该是发送到 OrbitControls 构造函数的第二个参数。
尝试 renderer.domElement.addEventListener('wheel', custom_handleMouseWheel);

如何在 OrbitControls 中编写自定义鼠标滚轮事件处理程序？

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

mousewheel

three.js

orbitcontrols