11 Three.js使用Detector.js插件实现兼容性检测

2018-02-09 18:11:12 人阅读

案例查看有问题?
全屏试试!

案例解析

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

(1)判断canvas兼容。

(2)判断webgl兼容性。

(3)在页面添加不兼容提示信息。

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

首先,将插件引入到页面:

 

[html] view plain copy
 
  1. <script src="examples/js/Detector.js"></script>  


然后,在js里面添加一个判断:

 

 

[javascript] view plain copy
 
  1. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();  

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

 

下面,附上Detector.js插件代码:

 

[javascript] view plain copy
 
  1. /** 
  2.  * @author alteredq / http://alteredqualia.com/ 
  3.  * @author mr.doob / http://mrdoob.com/ 
  4.  */  
  5.   
  6. var Detector = {  
  7.   
  8.     canvas: !! window.CanvasRenderingContext2D,  
  9.     webgl: ( function () {  
  10.   
  11.         try {  
  12.   
  13.             var canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );  
  14.   
  15.         } catch ( e ) {  
  16.   
  17.             return false;  
  18.   
  19.         }  
  20.   
  21.     } )(),  
  22.     workers: !! window.Worker,  
  23.     fileapi: window.File && window.FileReader && window.FileList && window.Blob,  
  24.   
  25.     getWebGLErrorMessage: function () {  
  26.   
  27.         var element = document.createElement( 'div' );  
  28.         element.id = 'webgl-error-message';  
  29.         element.style.fontFamily = 'monospace';  
  30.         element.style.fontSize = '13px';  
  31.         element.style.fontWeight = 'normal';  
  32.         element.style.textAlign = 'center';  
  33.         element.style.background = '#fff';  
  34.         element.style.color = '#000';  
  35.         element.style.padding = '1.5em';  
  36.         element.style.width = '400px';  
  37.         element.style.margin = '5em auto 0';  
  38.   
  39.         if ( ! this.webgl ) {  
  40.   
  41.             element.innerHTML = window.WebGLRenderingContext ? [  
  42.                 'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',  
  43.                 'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'  
  44.             ].join( '\n' ) : [  
  45.                 'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',  
  46.                 'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'  
  47.             ].join( '\n' );  
  48.   
  49.         }  
  50.   
  51.         return element;  
  52.   
  53.     },  
  54.   
  55.     addGetWebGLMessage: function ( parameters ) {  
  56.   
  57.         var parent, id, element;  
  58.   
  59.         parameters = parameters || {};  
  60.   
  61.         parent = parameters.parent !== undefined ? parameters.parent : document.body;  
  62.         id = parameters.id !== undefined ? parameters.id : 'oldie';  
  63.   
  64.         element = Detector.getWebGLErrorMessage();  
  65.         element.id = id;  
  66.   
  67.         parent.appendChild( element );  
  68.   
  69.     }  
  70.   
  71. };  
  72.   
  73. // browserify support  
  74. if ( typeof module === 'object' ) {  
  75.   
  76.     module.exports = Detector;  
  77.   
  78. }  
  79.  

案例源代码


                                            
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多