项目中用到了THREE.OrbitControls
, 还要内嵌HTML结构(高德地图), 我这边采用的是THREE.CSS3DObject
. 这导致了一个问题--由于OrbitControls
必须将事件绑定到container
及以上的DOM
中, 这样就将CSS3DObject
中的DOM
的触摸事件被阻止了.
经过思考及测试, 只需将OrbitControls
中onTouchMove
的event.preventDefault()
和event.stopPropagation()
注释掉, 并为CSS3DObject.element
添加两个事件处理程序
// 必须将OrbitControls中的onTouchMove中的event.preventDefault()和event.stopPropagation()去掉, 猜测是因为高德将移动事件绑定到了document或window
css3dObject.element.addEventListener("touchstart", e => {
// 这儿必须阻止冒泡, 否则会导致网页和整个场景(Scene)一起动作
// 但由于这儿不能preventDefault()的同时还stopPropagation(), 导致不能阻止该节点上移动端浏览器的滑动默认前进/后退动作.
e.stopPropagation()
})
复制代码