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'):[
'YourbrowserdoesnotseemtosupportWebGL.
',
'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;
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。