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 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
js select实现省市区联动选择
Apr 17 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
angular4笔记系列之内置指令小结
Nov 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
Bootstrap实现弹性搜索框
2016/07/11 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python 正则表达式操作指南
2009/05/04 Python
python中引用与复制用法实例分析
2015/06/04 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
详解Python传入参数的几种方法
2019/05/16 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
人力资源部培训专员岗位职责
2014/01/02 职场文书
护理不良事件检讨书
2014/02/06 职场文书
工会工作先进事迹
2014/08/18 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
导游词之包公祠
2019/11/25 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP