Three.js利用Detector.js插件如何实现兼容性检测详解
前言
本文主要给大家介绍了关于Three.js用Detector.js插件实现兼容性检测的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
其实Detector.js插件的代码很短,但是功能很全,
(1)判断canvas兼容。
(2)判断webgl兼容性。
(3)在页面添加不兼容提示信息。
这三个功能已经对兼容性检测足够了。
使用方式也很简单:
首先,将插件引入到页面:
然后,在js里面添加一个判断:
if(!Detector.webgl)Detector.addGetWebGLMessage();
就实现了兼容性的检测,是不是很简单,去测试一下吧。
下面,附上Detector.js插件代码:
/** *@authoralteredq/http://alteredqualia.com/ *@authormr.doob/http://mrdoob.com/ */ varDetector={ canvas:!!window.CanvasRenderingContext2D, webgl:(function(){ try{ varcanvas=document.createElement('canvas');return!!(window.WebGLRenderingContext&&(canvas.getContext('webgl')||canvas.getContext('experimental-webgl'))); }catch(e){ returnfalse; } })(), workers:!!window.Worker, fileapi:window.File&&window.FileReader&&window.FileList&&window.Blob, getWebGLErrorMessage:function(){ varelement=document.createElement('div'); element.id='webgl-error-message'; element.style.fontFamily='monospace'; element.style.fontSize='13px'; element.style.fontWeight='normal'; element.style.textAlign='center'; element.style.background='#fff'; element.style.color='#000'; element.style.padding='1.5em'; element.style.width='400px'; element.style.margin='5emauto0'; if(!this.webgl){ element.innerHTML=window.WebGLRenderingContext?[ 'YourgraphicscarddoesnotseemtosupportWebGL.
', 'Findouthowtogetithere.' ].join('\n'):[ 'Yourbrowserdoesnotseemtosupport WebGL.
', 'Findouthowtogetithere.' ].join('\n'); } returnelement; }, addGetWebGLMessage:function(parameters){ varparent,id,element; parameters=parameters||{}; parent=parameters.parent!==undefined?parameters.parent:document.body; id=parameters.id!==undefined?parameters.id:'oldie'; element=Detector.getWebGLErrorMessage(); element.id=id; parent.appendChild(element); } }; //browserifysupport if(typeofmodule==='object'){ module.exports=Detector; }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。