Three.js利用Detector.js插件如何实现兼容性检测详解


Posted in Javascript onSeptember 26, 2017

前言

本文主要给大家介绍了关于Three.js用Detector.js插件实现兼容性检测的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

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

(1)判断canvas兼容。

(2)判断webgl兼容性。

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

这三个功能已经对兼容性检测足够了。

使用方式也很简单:

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

<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( '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 <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; 
 
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
在vue中使用G2图表的示例代码
Mar 19 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 #jQuery
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 #Javascript
JavaScript 自定义事件之我见
Sep 25 #Javascript
详解在vue-cli中使用路由
Sep 25 #Javascript
Bootstrap一款超好用的前端框架
Sep 25 #Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 #Javascript
javascript input输入框模糊提示功能的实现
Sep 25 #Javascript
You might like
php使用cookie实现记住登录状态
2015/04/27 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python交换两个变量的值方法
2019/01/12 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
万里长城导游词
2015/01/30 职场文书
鉴史问廉观后感
2015/06/10 职场文书
2016年元旦寄语
2015/08/17 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android