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

最新推荐文章于 2025-05-22 11:21:09 发布

转载最新推荐文章于 2025-05-22 11:21:09 发布 · 4.4k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c4974f2e51d4505171c81cc

文章标签：

#javascript #ViewUI

本文探讨了THREE.js的OrbitControls与内嵌高德地图的触摸事件冲突问题。通过修改OrbitControls的事件处理，实现触摸事件在三维场景与地图间的正确传递，避免了事件阻止的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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