threejs中PC与手机操作的一些总结

在一些简单的webgl项目中，我们经常碰到的操作就是两指缩放，滑动旋转，这两种操作经常要进行PC和手机的适配，这里总结一下我踩了的一些小小的坑吧~

1.手机与PC获取屏幕对应点击位置的方法不同：

手机是触摸获取位置，PC是点击鼠标获取位置两者的代码略有不同，这与threejs构建的3D世界没有关系，仅仅是将点击/触摸的位置转换为窗体位置罢了，我在下面总结一下：

PC点击位置：

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

手机触摸位置：

mouse.x = (event.touches[ 0 ].pageX /  window.innerWidth) * 2 -1;
mouse.y = -(event.touches[ 0 ].pageY / window.innerHeight) *2 +1;

2.手机和电脑移动方式的不同：

大家都知道，鼠标和触摸都分为点击/按下、移动/滑动、抬起这三个阶段，这里就有一个小坑了！点击抬起手机电脑的操作方式都是一样的，但是移动这块，电脑中鼠标点击之后到下次点击鼠标的移动会不断触发onDocumentMouseMove方法，也就是说鼠标不可能点击（0,0）位置，突然下一次移动到（10,10）位置，因为期间还有一个鼠标移动事件不断地触发。而手机则不同，这次你点击了（0,0）下次点击（10,10）就在正常不过了，我们也不需要手指在屏幕上进行滑动。那是这些有什么用呢？

这里就不得不提到我最近做的一个小的程序，用threejs实现3D地球展示，当手指滑动/鼠标拖动时旋转地球，我用的方法是，每次移动获得x/y的值，减去上次移动的值，得到这次滑动的偏移量然后旋转地球，这个效果在PC上没有任何问题，可是到了手机上，每次滑动完屏幕，下次滑动时地球又嗖的一下跳回去了，然后我想了半天才发现是这个原因，手机在滑动完成之后，下一次滑动点击位置不同，x/y的差值太大了，所以需要在每次点击时就先储存到上次移动的值~下面是代码

   function onDocumentMouseDown( event ) {is_click = true;
       is_move = false;
   //适配手机
   if(event.touches){mouse.x = (event.touches[ 0 ].pageX /  window.innerWidth) * 2 -1;
           mouse.y = -(event.touches[ 0 ].pageY / window.innerHeight) *2 +1;
           pre_mouse.x = mouse.x;
           pre_mouse.y = mouse.y;
   }}function onDocumentMouseMove( event ) {is_move = true;
       mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
       mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
       if(is_click){if(earth && earth_cloud){earth.rotation.set(earth.rotation.x - (mouse.y - pre_mouse.y), earth.rotation.y + (mouse.x - pre_mouse.x), earth.rotation.z);
               earth_cloud.rotation.set(earth_cloud.rotation.x - (mouse.y - pre_mouse.y), earth_cloud.rotation.y + (mouse.x - pre_mouse.x), earth_cloud.rotation.z);
           }}pre_mouse.x = mouse.x;
       pre_mouse.y = mouse.y;
}function onDocumentTouchMove() {is_move = true;
       mouse.x = (event.touches[ 0 ].pageX /  window.innerWidth) * 2 -1;
       mouse.y = -(event.touches[ 0 ].pageY / window.innerHeight) *2 +1;
       if(is_click){if(earth && earth_cloud){earth.rotation.set(earth.rotation.x - (mouse.y - pre_mouse.y), earth.rotation.y + (mouse.x - pre_mouse.x), earth.rotation.z);
               earth_cloud.rotation.set(earth_cloud.rotation.x - (mouse.y - pre_mouse.y), earth_cloud.rotation.y + (mouse.x - pre_mouse.x), earth_cloud.rotation.z);
           }}pre_mouse.x = mouse.x;
       pre_mouse.y = mouse.y;
}

先总结这两个坑~大家在开发中遇到什么问题也可以在评论中指出，多交流，多学习才有助于提高嘛~

threejs中PC与手机操作的一些总结相关推荐

在pc端上操作手机工具分享
在pc端上操作手机工具分享今天要跟大家分享的工具名字叫scrcpy(来源于GitHub) scrcpy可以通过usb或是(Tcp/IP)来连接安卓设备,并且不需要root权限,程序支持GNU/Lin ...
threejs 加载两个场景_threejs中的三维场景操作
在threejs开发中,不可避免的需要对三维场景进行交互,例如对模型进行旋转,缩放,平移等操作.接下来,我们就聊一聊如何进行三维场景的交互. 控制的对象是谁? 在三维的世界中,如果想达到场景的TRS( ...
[转] ThreeJS中，那些会让阴影失效的操作
转自:https://segmentfault.com/a/1190000015330360 本来以为不就设一个阴影嘛,网上这么多文章,随便看一篇就知道怎么设置了,然而我却花了整整一天才让阴影出现.. ...
adb cannot connect to daemon_手机触屏失效的抢救办法，以及如何利用adb实现PC与手机交互...
手机进水或者摔坏屏幕导致触屏失效的时候,一般情况下,要么选择换屏,要么选择把手机扔掉.但其实如果有一根OTG线,手机中的资料还可以安全备份出来,或者还可以再利用起来,发挥一下余热做点别的事. 像上图一 ...
adb 最大连接_手机触屏失效的抢救办法，以及如何利用adb实现PC与手机交互
手机进水或者摔坏屏幕导致触屏失效的时候,一般情况下,要么选择换屏,要么选择把手机扔掉.但其实如果有一根OTG线,手机中的资料还可以安全备份出来,或者还可以再利用起来,发挥一下余热做点别的事. 像上图一 ...
小白如何在阿里云快速建站（pc站+手机站+公众号+小程序）
在当今互联网大发展的时代,互联网已经成为和吃饭睡觉一样平常的事物.不论个人还是公司.不论是打工的还是老板.不论是农村的还是城市的,不知道互联网的人大概只剩下那些年龄过高的部分老年人了吧. 个人.组织. ...
我来玩转一下arp -a （pc ping 手机）
我进行了如下图的操作: 我们可以看到, 第一次在pc的cmd中操作arp -a的时候, arp缓存表中并没有手机的相关信息. 此时, 我们让pc来ping一下手机ip, 通过抓包可以看出pc在局域网 ...
DBA开发PC和手机报表解决方案及实践
DBA开发PC和手机报表解决方案及Step By Step实践作者:长江支流 " 只写一个数据库的结构化查询SQL语句,因为这是绝大部分企业的信息中心数据库管理员DBA都会做的事情.但是 ...
电脑端html转手机app,如何从PC或手机上的网页链接完美切换到App--传媒--人民网...
在智能手机出货量超过PC和功能手机.用户使用App比例超过80%以上的情况下,智能手机App绝对成为了人们生活的主角.对于PC.平板.智能手机之间的跨平台无缝体验,很早之前开发者就开始关注了,当大量A ...

threejs中PC与手机操作的一些总结

threejs中PC与手机操作的一些总结相关推荐

最新文章

热门文章