在three.js的场景中,我们经常会给鼠标的点击添加交互事件,最常见的方式就是:
container.addEventListener("mousedown", function(){ });
但是,在监听的过程中,发现鼠标的点击事件并不能触发监听事件,造成这种情况的原因一般就是场景中引入了orbitControl控件导致,解决这个问题的方式有如下两种方式:
方式一:修改orbitControl源码
在OrbitControls.js的源码中,搜索关键字mousedown找到onMouseDown函数里的event.preventDefault(),将这行代码注释就可以正常触发mousedown了。
方式二:使用pointerdown等方式进行替换
container.addEventListener("pointerdown", function(){ });
上述两种方式均可以解决三维场景在引入orbitControl而导致的鼠标相关监听事件失效的问题。