three.js兼容的问题Detector.js

其实Detector.js插件的代码很短，但是功能很全，

（1）判断canvas兼容。

（2）判断webgl兼容性。

（3）在页面添加不兼容提示信息。

这三个功能已经对兼容性检测足够了。使用方式也很简单：

首先，将插件引入到页面：

[html]view plaincopy

然后，在js里面添加一个判断：

[javascript]view plaincopy

if( ! Detector.webgl ) Detector.addGetWebGLMessage();

就实现了兼容性的检测，是不是很简单，去测试一下吧。

下面，附上Detector.js插件代码：

[javascript]view plaincopy

/**

* @author alteredq / http://alteredqualia.com/

* @author mr.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 ='5em auto 0';

if( !this.webgl ) {

element.innerHTML = window.WebGLRenderingContext ? [

'Your graphics card does not seem to support WebGL.',

'Find out how to get it here.'

].join('\n') : [

'Your browser does not seem to support WebGL.
',

'Find out how to get it here.'

].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 );

}

};

// browserify support

if(typeofmodule ==='object') {

module.exports = Detector;

}