其实detector.js插件的代码很短，但是功能很全，
（1）判断canvas兼容。
（2）判断webgl兼容性。
（3）在页面添加不兼容提示信息。
这三个功能已经对兼容性检测足够了。
本文主要给大家介绍了关于three.js利用detector.js插件如何实现兼容性检测的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。希望能帮助到大家。
使用方式也很简单：
首先，将插件引入到页面：
<script src="examples/js/detector.js"></script>
然后，在js里面添加一个判断：
if ( ! detector.webgl ) detector.addgetwebglmessage();
就实现了兼容性的检测，是不是很简单，去测试一下吧。
下面，附上detector.js插件代码：
/**
* @author alteredq / http://alteredqualia.com/
* @author mr.doob / http://mrdoob.com/
*/
var detector = {
canvas: !! window.canvasrenderingcontext2d,
webgl: ( function () {
try {
var canvas = document.createelement( 'canvas' ); return !! ( window.webglrenderingcontext && ( canvas.getcontext( 'webgl' ) || canvas.getcontext( 'experimental-webgl' ) ) );
} catch ( e ) {
return false;
}
} )(),
workers: !! window.worker,
fileapi: window.file && window.filereader && window.filelist && window.blob,
getwebglerrormessage: function () {
var element = document.createelement( 'p' );
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 = '5em auto 0';
if ( ! this.webgl ) {
element.innerhtml = window.webglrenderingcontext ? [
'your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/getting_a_webgl_implementation" rel="external nofollow" rel="external nofollow" style="color:#000">webgl</a>.<br />',
'find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" style="color:#000">here</a>.'
].join( '\n' ) : [
'your browser does not seem to support <a href="http://khronos.org/webgl/wiki/getting_a_webgl_implementation" rel="external nofollow" rel="external nofollow" style="color:#000">webgl</a>.<br/>',
'find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" style="color:#000">here</a>.'
].join( '\n' );
}
return element;
},
addgetwebglmessage: function ( parameters ) {
var parent, 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 );
}
};
// browserify support
if ( typeof module === 'object' ) {
module.exports = detector;
}
相关推荐：
js解决position:sticky兼容性问题的方法
一些js中兼容性易错问题的总结
javascript中关于兼容性能的具体分析
以上就是detector.js插件实现兼容性检测代码的详细内容。