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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
laypage分页控件使用实例详解
May 19 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 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缓存函数的使用说明
2013/05/10 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
ES6的新特性概览
2016/03/10 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
在cmd中查看python的安装路径方法
2019/07/03 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python实现数字炸弹游戏
2020/07/17 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
Ruby如何定义一个类
2012/10/08 面试题
大专生简历的自我评价
2013/11/26 职场文书
信息管理员岗位职责
2013/12/01 职场文书
优秀员工自荐书
2013/12/19 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
给儿子的表扬信
2014/01/15 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
舞蹈专业求职信
2014/06/13 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
党小组鉴定意见
2015/06/02 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
nginx.conf配置文件结构小结
2022/04/08 Servers