高德地图嵌入到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或windowcss3dObject.element.addEventListener("touchstart", e => {// 这儿必须阻止冒泡, 否则会导致网页和整个场景(Scene)一起动作// 但由于这儿不能preventDefault()的同时还stopPropagation(), 导致不能阻止该节点上移动端浏览器的滑动默认前进/后退动作.e.stopPropagation()
})复制代码

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

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

高德地图：2020中秋、国庆假期安全畅行指南
今天给大家分享的是高德地图:2020中秋.国庆假期安全畅行指南高德地图:2020中秋.国庆假期安全畅行指南据了解,在公安部交通管理局的指导下,高德地图发布了<2020中秋.国庆假期安全畅行指 ...
让你在 API 设计中少踩坑的实战分享
本文来自作者奔跑吧架构师在 GitChat 上分享「让你在 API 设计中少踩坑的实战分享」,「阅读原文」查看交流实录. 「文末高能」编辑 | 哈比在项目开发中,实际的编码只占用了整个项目不 ...
Pytorch中Dataloader踩坑：RuntimeError: DataLoader worker (pid(s) 6700, 10620) exited unexpectedly
Pytorch中Dataloader踩坑环境: 问题背景: 观察报错信息进行分析根据分析进行修改尝试总结环境: 系统:windows10 Pytorch版本:1.5.1+cu101 问题背景: ...
android 高德地图 3d,在React Native中使用高德地图组件react-native-amap3d
react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受react-native-maps启发,提供功能丰富且易用的接口. node 主要功能:react ...
高德地图api实现导航功能（使用经验）避坑关注
关于导航功能的实现实际上就是使用市面上开放的地图api,按照操作文档进行开发实现功能的. 业内流行的无非是两种,一种高德地图api,另一种是百度地图api,博主这里选用了高德地图api,进行避坑讲解. ...
vue-cli3.0引入高德地图3d效果两种方法+实例+填坑
前言: 因为项目需要引入高德地图的3d效果,找了很多资料,在这里记录下方法和实例组件 ***注意: 因为两个方法代码量都特别大,这里分2个页面详细说一下,方法一是链接出去专门说,最下面有更多资料,高德 ...
对称加密算法在C#中的踩坑日常
前言有幸接触了一下传说中的对称加密算法3DES 感觉这些加密算法与我的工作是想去甚远的,一般没什么机会接触这些东西今次了解了一下3DES这个对称算法原理算不上明白,算是踩了C#中的一些坑吧 C# ...
微信退款 java工具类,微信支付中退款踩坑记录
首先附上微信支付的开发者文档其实这里所说的踩坑记录,无非就是微信在开发者文档上的写不太明确,也没有比较官方的demo,在此列出一个可行的demo,供大家下载使用. 主要问题就是在这几步解密上微信的 ...
高德地图定位精度多少米_中美俄卫星定位精度分别是多少？美0.1米，俄10米，中国呢？...
在古代,悬于天际的北斗七星就被那时候的人们当做辨别方向的工具,在现代,太空之中的北斗卫星也在为人们指引方向,为了这一天的到来,我们等待了太久太久.1993年发生的银河号事件里,美国宣称我国商船携带了违 ...

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

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

最新文章

热门文章