高德地图嵌入到threejs全景中的踩坑指南

项目中用到了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()
})

复制代码

转载于:https://juejin.im/post/5c4974f2e51d4505171c81cc