收藏本站 关于我们

Web前端也能做的AR互动(原创文章)

发布时间:2016-12-25 11:38:43   来源:PS教程   人气:0

前言:目录  一、项目体验 二、技术实现 三、兼容情况 四、遇到的问题 五、结语  正文  一、项目体验  以往的AR,都是要在某个APP内才可以

目录

 

一、项目体验

二、技术实现

三、兼容情况

四、遇到的问题

五、结语

 

正文

 

一、项目体验

 

以往的AR,都是要在某个APP内才可以体验到的,例如pokemon go和QQ AR火炬传递活动。

 

\

videoWrap.style.width = window.innerWidth + 'px';

videoWrap.style.height = window.innerHeight + 'px';</s cript>

 

4.1.3 页面无法针对模型点击

 

遇到问题:

本来页面设置的是让用户点击3D模型来进行交互的,可发现没办法单独点击到模型,整个交互就不能进行下去了。

 

解决方法:

修改了页面的点击交互方式,改用坐标瞄准判定的方式。页面中心设置一个瞄准区域,用户移动手机让3D模型处在瞄准区域内,即判定为成功,进行下一步。这样就避免了页面需要点击的情况。


思路是:3D模型和camera都有自己的三维坐标,new THREE.Vector3获取到两者的坐标,a.angleTo(b)求他们的夹角,夹角小于设定范围,则判断为已瞄准。


由于最开始的需求是要做一个tips,提醒用户向左转或者向右转,用的是new THREE.Vector2获取到两者在Y面的坐标,再用a.angle()-b.angle()求得两者在Y面的夹角来判断当前camera在模型的右侧还是左侧。新需求相当于要增加上下的判定,用new THREE.Vector2获取到两者在X面的坐标,再用a.angle()-b.angle()求得两者在X面的夹角。Y面夹角和X面夹角都小于设定范围时,则判断为已瞄准。

 

\

 version=version.substring(0,1); if(version>5 && version <9){ //版本为iOS8以下直接跳转落地页

 }

}

 

 

五、结语

 

做新技术研究和实践的过程中会遇到没有先例的坑,去查API文档,曲线救国的方式解决问题(有时候觉得重构/前端是一个需要带着小聪明的工种XD)。很感谢游戏公众号的同事们给予的大力支持让我们的页面能顺利上线并被推送给玩家,看着数据蹭蹭蹭的涨,终于觉得努力没有白费了。


最终页面的数据展示出,部分用户设备是支持拉起摄像头的,但可能出于安全问题的考虑,他们拒绝拉起。这是我们后续工作要考虑的一个问题,如何保护用户隐私以及让用户信任我们。


总的来说,这是一次很有趣充实的新技术研究和实践,学习的过程是很让人幸福的。

本文来自PS教程网www.46PS.com,转载请注明!关键词:WEBFLASHFLASH教


PS教程