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实现日期加减的方法
Nov 29 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jQuery中extend函数详解
Jul 13 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
js this 绑定机制深入详解
Apr 30 Javascript
ant design 日期格式化的实现
Oct 27 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
PHP5常用函数列表(分享)
2013/06/07 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
JavaScript闭包详解
2015/02/02 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
JavaScript常用工具方法封装
2019/02/12 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Django choices下拉列表绑定实例
2020/03/13 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
应聘医药销售自荐书范文
2014/02/08 职场文书
体育运动会广播稿
2014/10/05 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL