欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
关于我们
微信小程序网站前端开发—Web前端也能做的AR互动
时间: 2021-03-18 08:34 浏览次数:
()

Web前端开发开发设计还可以做的AR互动交流沟通交流

 In 网页页面网页页面再次搭建 on 10:35:55 by 七宝

文档文件目录 一、最新项目体会二、技术性性进行三、兼容情况四、遇到的难点五、完毕语 文章内容文章正文 一、最新项目体会    以往的AR,都是要在某一APP内才可以够体会到的,例如pokemon go和QQ AR蜡烛传输主题风格主题活动。

     大伙儿精锐精英团队在做技术性性储备的状况下,发现Android设备机器设备着手机手机微信、手Q可用getUserMedia()网页页面网页页面拉起拍攝头,并依据createObjectURL把数据信息信息内容广泛广为流传给video在网页页面网页页面呈现,以搭建出及时视频的具体实际效果。
[标识:內容1]
据全新升级统计分析剖析数据信息信息内容显示信息信息内容,安卓系统系统软件具体实际操作系统软件手机软件占有全球移动智能化化手机上上系统软件手机软件86.2%的市场销售销售市场销售市场市场份额。也就是说,大伙儿可以依据手机上手机微信和手Q来设计网页的AR互动交流沟通交流啦!!!(digi.tech.qq/a/20160822/034526.htm?t=1471877263208)因而大伙儿依据实际规定开展并开发设计设计方案了一个WebAR的H5最新项目,手机游戏游戏玩家进来网页页面网页页面可以没有安装额外APP的情况下,体会到AR造成的开心;针对兼容问题及时视频的浏览器,就提供三d全景图图体会版。进入网页页面网页页面根据提示具体实际操作便可以开展WebAR手机游戏,全自动自动跳转落地式式页。

   

 

 二、技术性性进行 2.1 WebRTC WebAR的基本     无论是APPAR还是WebAR的一个最基本要进行的功效就是及时视频具体实际效果。WebRTC(网页页面网页页面及时通信,Web Real-Time Communication)是一个可用网页页面网页页面浏览器进行及时视頻视频语音对话或视频对话的API。getUserMedia()是WebRTC的在这其中一个API,就是可用网页页面网页页面拉起拍攝头的API,拍攝头得到到的数据信息信息内容流会以 video 标志作为媒体呈现在网页页面网页页面上,这就给了大伙儿一个十分好的信息内容內容,可以在video上累加一切大伙儿务必的内容和具体实际操作,从而搭建出WebAR的具体实际效果。 关键编号:
function getMedia() { if (navigator.getUserMedia) { navigator.getUserMedia({ 'video': { 'optional': [{ }] } }, successFunc, errorFunc); } else { alert('Native device media streaming (getUserMedia) not supported in this browser.'); }} var localStream;function successFunc(stream) { document.getElementById('video').src = window.URL window.URL.createObjectURL(stream) || stream; localStream = stream; } function errorFunc(e) { alert('Error!'+e); } function closeMedia() { localStream.stop(); document.getElementById('video').src = '';}

 (blog.csdn.net/journey191/article/details/40744015)

 2.2 三d实体线实体模型 WebGL、three.js、三dMAX    本次做的WebAR十分酷炫的一本人验是他的三d实体线实体模型呈现。要在网页页面网页页面呈现三d实体线实体模型,务必先把实体线实体模型放入三dMAX里进行预处理(整个过程会遇到很多bug和艰辛),导出来来成js文本文档,再借助three.js在网页页面网页页面里建立实体线实体模型、调整日本动漫等(整个过程也会遇到很多bug和艰辛)。这些方面工作中中重要是四女生(signhuang)来担负的,要大家期待四女生后面更详细心酸的共享资源吧。 2.3 三d全景图图 three.js、球体全景图图    三d全景图图的制作有很多种方法,CSS3、Flash、Krpano等,因为三d实体线实体模型日本动漫大伙儿是借助three.js在网页页面网页页面实体模型的,因而三d全景图图大伙儿也考虑到到用three.js来制作。 三、兼容情况 3.1 getUserMedia() 由于iPhone的安全性性体系难点,iOS设备机器设备一切浏览器都不可用getUserMedia()。     最终数据信息信息内容呈现,Android设备机器设备下,有99.45%的设备机器设备手中机手机微信是可用getUserMedia()的,98.05%的设备机器设备手上Q是可用getUserMedia()的。而大伙儿之前检验型号规格里面,该机浏览器、QQ浏览器对getUserMedia()全是有不一样水准的可用。 2017年份后,也就是chrome47版本号号前,chrome是可用http网页页面网页页面拉起拍攝头的,源于于安全性性难点考虑到到,chrome47版本号号后只可用https网页页面网页页面拉起拍攝头。

(caniuse.mojijs/Home/Html/item/key/stream/index.html) 3.2 三d实体线实体模型 三d全景图图 WebGL是一项应用JavaScript API三d3D渲染互动交流式三d电脑上图中型和2D图形的技术性性,可兼容一切的网页页面网页页面浏览器,无需改裝手机软件。WebGL在当今浏览器中早就被广泛可用。三d实体线实体模型在移动智能终端浏览器上的兼容情况还是十分好的,已检验型号规格里面,92%的设备机器设备是可用浏览器三d实体模型和日本动漫的。

(caniuse.mojijs/Home/Html/item/key/webgl/index.html) 四、遇到的难点 4.1 getusermedia() 4.1.1 前后左右上下拍攝头遇到难点:      运用getUserMedia()拉起拍攝头时,默认设置设定是拉起外接拍攝头的,但是要搭建WebAR的具体实际效果,没什么疑惑是务必拉起后置拍攝头的。 解决方法:      因为在得到设备机器设备源ID的状况下,外接拍攝头会排在后置拍攝头前,不仅独设置的话,便会运用第一个得到到的设备机器设备源ID,也就是外接拍攝头的ID。稍微提高点预处理便可以。 关键编号:
var exArray = []; //存储设备机器设备源ID if (navigator.getUserMedia) { MediaStreamTrack.getSources(function (sourceInfos) { for (var i = 0; i != sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; //这儿会分析xmlaudio,video,因而得多方面差别 if (sourceInfo.kind === 'video') { exArray.push(sourceInfo.id); } } navigator.getUserMedia({ 'video': { 'optional': [{ 'sourceId': exArray[1] //0为外接拍攝头,1为后置 }] }, 'audio':false }, successFunc, errorFunc); });}

 

4.1.2 拍攝头全屏幕幕遇到难点:    拍攝头拍摄的内容不能以完美的全屏幕幕,上下都会有留白艺术造型艺术,有缺憾。尝试了多种多样多种多样原生态态设置来设置 video 规格,希望能完美铺满全屏幕幕,可是都不获得取得成功。 解决方法: 图上是用CSS设置了 video 为鲜红色情色况,并且设置了宽高铺满全屏幕幕。 video 标志确实按时待的展现,但拍攝头拍摄到的内容却不可易被合理铺满全屏幕幕。可以掌握为好似大伙儿平常拍摄的视频,是有固定不动没动宽高比的,在浏览器宽高比不一样又要求视频全部显示信息信息内容时,便会出现上下留白艺术造型艺术或者左右留白艺术造型艺术的情况。检验发现, video 标志无需另外设置宽高,会默认设置设定为铺满全屏幕幕并且外流,那麼大家外出层提高一个div并且设置为浏览器宽高,再提高 overflow:hidden即可以模拟仿真仿真模拟全屏幕幕的具体实际效果了。

   

 关键编号:
 style #videoBox{position: absolute;left: 50%;top: 50%;z-index: 1;-webkit-transform: translate(-50%,-50%);-webkit-transform-origin: 50% 50%;}#videoWrap{position: relative;left: 0;top: 0;background: #4CAABE;overflow: hidden;} /style div id="videoWrap" video autoplay="autoplay" id="videoBox" /video /div script var videoWrap = document.getElementById('videoWrap');videoWrap.style.width = window.innerWidth + 'px';videoWrap.style.height = window.innerHeight + 'px'; /script 
 4.1.3 网页页面网页页面无法针对实体线实体模型点一下遇到难点:    本来网页页面网页页面设置的是让顾客点一下三d实体线实体模型来进行互动交流的,可发现无法单独点一下到实体线实体模型,所有互动交流都不能进行出来了。 解决方法:      修改了网页页面网页页面的点一下互动交流方式,改为坐标看好分辨的方式。网页页面网页页面管理方法管理中心设置一个看好地域,顾客移动手能力工作能力机让三d实体线实体模型处在看好地域内,即分辨为获得取得成功,进行下一步。那般就避免了网页页面网页页面务必点一下的情况。     设计构思是:三d实体线实体模型和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面夹角都小于设定范围时,则辨别为已看好。 

 关键编号:
/***看好分辨***/var v = camera.getWorldDirection();//左右辨别var a1 = new THREE.Vector2( a.position.x, a.position.z );var b1 = new THREE.Vector2( v.x, v.z );dt1 = a1.angle()-b1.angle();//上下辨别var a2 = new THREE.Vector2( a.position.y, a.position.z );var b2 = new THREE.Vector2( v.y, v.z );dt2 = a2.angle()-b2.angle();if(Math.abs(dt1) 0.1 Math.abs(dt2) 0.1){ //竖直垂直居中啦!}

 

4.2 三d全景图图 4.2.1 iOS和Android初始化三d全景图图的房子房屋朝向不一致遇到难点:    iOS设备机器设备在一切房子房屋朝向(西北大大西北)打开三d全景图图,都是看向一个固定不动没动方向的。

    Android设备机器设备没有同房子房屋朝向(西北大大西北)打开三d全景图图,看向的并不是同方向。

    这一网页页面网页页面便于降低互动交流难度系数系数以及固定不动没动让三d实体线实体模型出现在表演演出舞台上(状况比较好看),务必的不是在同房子房屋朝向(西北大大西北)打开三d全景图图,都是看向一个固定不动没动方向的。 解决方法:      网页页面网页页面加载完毕初始化camera,得到到camera看向的矢量素材素材图片(不可易根据看向角度不一样而不一样),lookAt(target)旋转三d全景图图房子房屋朝向哪一个位置,那般每一次打开网页页面网页页面全是房子房屋朝向一个固定不动没动的方向,再rotate每一个方向进行最终调整。 关键编号:
var v = camera.getWorldDirection();var geometry = new THREE.SphereGeometry( 1000, 16, 8 ); geometry.scale( -1, 1, 1 );var material = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'bg.jpg' )} );var stage = new THREE.Mesh( geometry, material );stage.lookAt(new THREE.Vector3( v.x, 0, v.z ));stage.rotateY((85 * Math.PI)/180);stage.rotateZ((-4 * Math.PI)/180);scene.add( stage );

 

4.2.2 初始化精确精准定位遇到难点:    顾客进入网页页面网页页面状况下的手机上上角度有各种各样各种各样情况,可能是竖着手机扫描仪仪二维码,接着平放宽手机上等待加载开展查寻网页页面网页页面。网页页面网页页面初始化方向和最终查寻方向差过量的话,三d3D渲染的全景图图、三d实体线实体模型等的位置可能会偏位十分大。 解决方法:    进入网页页面网页页面捕获camera看向的矢量素材素材图片,加载开展捕获现如今camera看向的矢量素材素材图片,有偏位的话再度初始化全景图图、三d实体线实体模型等的位置和角度。 关键编号:
if(!hasMoved typeof(defaultCameraDirection)!='undefined'){ var v = camera.getWorldDirection(); if( v.x != defaultCameraDirection.x || v.y != defaultCameraDirection.y || v.z != defaultCameraDirection.z ){ hasMoved = true; resetLocationAndRotation();//初始化 }}

 

4.3 兼容问题情况消除 4.3.1 getUserMedia()、three.js、手机上手机陀螺仪 ①辨别不是是可用getUserMedia()
function getMedia() { if (navigator.getUserMedia) { }, successFunc, errorFunc);//errorFunc是设备机器设备可用getUserMedia但是顾客不一样意开启拍攝头的情况 } else { //设备机器设备兼容问题getUserMedia }} function errorFunc(e) { alert('Error!'+e); }

 

②用Detector.js辨别不是是可用WebGL
 script src="github/mrdoob/three.js/blob/master/examples/js/Detector.js" /script script if(!Detector.webgl) { //兼容问题WebGL}else{ //可用WebGL} /script 

 

③运用three.js有错误时
console.error = (function(origin){ return function(errorlog) { if(/THREE/.test(errorlog)) { //Three错误 } } })(console.error);console.warn = (function(origin){ return function(errorlog) { if(/^THREE.WebGLRenderer:$/.test(errorlog)) { //Three三d3D渲染时错误 } } })(console.warn);

 

④设备机器设备兼容问题手机上手机陀螺仪
if(window.DeviceOrientationEvent) { //可用手机上手机陀螺仪}else{ //兼容问题手机上手机陀螺仪}

 

4.3.2 iOS8模糊不清歪斜确遇到难点:      有一名远方的朋友是iPhone 5S,检验发现加载到100%了,加载网页页面一直未消退,网页页面网页页面卡住。 解决方法:      本身网页页面网页页面的设置是:便于防止加载网页页面隐藏后,三d全景图图和三d实体线实体模型没三d3D渲染开展显示信息信息内容一片空白页页,因而加了个分辨,实体模型三d3D渲染开展才隐藏加载网页页面。找身边的朋友借了iPhone 5S检验,能完满进入三d全景图图AR网页页面,因而其实不是设备机器设备难点。问了着手机手机微信版本号号也是全新升级的,系统软件手机软件版本号号是iOS8,而没有难点的iPhone 5S的系统软件手机软件版本号号是iOS9,因而考虑到到是系统软件手机软件版本号号导致的难点。但是设备机器设备沒有身边无法一步歩消除可能性,查了下iOS8的占据率唯一2.8%,该手机上手机游戏顾客群体iOS设备机器设备占据率小于30%,因而管理决策放弃这一一部分顾客的网页页面网页页面体会,马上全自动自动跳转落地式式页。 关键编号:
var agent = navigator.userAgent.toLowerCase() ;var version;if(agent.indexOf("like mac os x") 0){ //ios var regStr_saf = /os [\d._]*/gi ; var verinfo = agent.match(regStr_saf) ; version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");}var version_str = version+"";if(version_str != "undefined" version_str.length 0){ version=version.substring(0,1); if(version 5 version 9){ //版本号号为iOS8以下马上全自动自动跳转落地式式页 }}

 

 五、完毕语

 

做新技术应用运用科学研究科学研究和实践活动主题活动的整个过程时候遇到没有事例的坑,去查API文字文本文档,曲线图图救国的方式解决难点(有时候候候觉得再次搭建/前端开发开发设计是一个务必带着小聪明伶俐的技术性技术工种XD)。很感谢手机上手机游戏手机微信微信公众号的小伙伴们给予的全力以赴可用要大家的网页页面网页页面能完满公布并被信息消息推送给手机游戏游戏玩家,看到数据信息信息内容蹭蹭蹭的涨,终于觉得努力没有徒劳无功了。

最终网页页面网页页面的数据信息信息内容呈现出,一一部分顾客设备机器设备是可用拉起拍攝头的,但可能源于于安全性性难点的考虑到到,他们拒绝拉起。它是大伙儿过后工作中时要考虑到到的一个难点,如何维护保养顾客隐私保护维护以及让顾客信任大伙儿。

整体来讲,它是一次很趣味性丰富多彩的新技术应用运用科学研究科学研究和实践活动主题活动,学习培训学习培训的整个过程是很让人幸福快乐开心的。 点评 共享资源到腾讯新浪网新浪微博 ()



Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园