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 相关文章推荐
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
javascript iframe跨域详解
Oct 26 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php实现websocket实时消息推送
2018/03/30 PHP
深入理解javascript原型链和继承
2014/09/23 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
js实现继承的5种方式
2015/12/01 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
详解supervisor使用教程
2017/11/21 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
护士演讲稿范文
2014/01/05 职场文书
服务员岗位责任制
2014/02/11 职场文书
结对共建协议书
2014/08/20 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书