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

方式二:使用pointerdown等方式进行替换
container.addEventListener("pointerdown", function(){ });
上述两种方式均可以解决三维场景在引入orbitControl而导致的鼠标相关监听事件失效的问题。
当在three.js场景中使用orbitControl时,可能会遇到鼠标点击事件无法触发的问题。这是因为orbitControl默认阻止了mousedown事件。解决方法包括:一是修改OrbitControls.js源码,注释掉event.preventDefault();二是改用pointerdown事件监听。这两种方式都可以有效地解决交互事件失效的难题。

1万+

被折叠的 条评论
为什么被折叠?



