Three.js利用Detector.js插件实现兼容性检测的方法

  介绍

这篇文章将为大家详细讲解有关Three.js利用Detector.js插件实现兼容性检测的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>前言

Three.js用Detector.js插件实现兼容性检测的相关内容

其实探测器。js插件的代码很短,但是功能很全,

(1)判断帆布兼容。

(2)判断webgl兼容性。

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

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

<强>使用方式也很简单:

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

& lt; script  src=https://www.yisu.com/zixun/"的例子/js/Detector.js ">

然后,在js里面添加一个判断:

if (!大敌;Detector.webgl ), Detector.addGetWebGLMessage ();

就实现了兼容性的检测,是不是很简单,去测试一下吧。

<强>下面,附上探测器。js插件代码:

/* *,   ,* @author  alteredq /, http://alteredqualia.com/    ,* @author  mr.doob /, http://mrdoob.com/    ,*/,=,{var  Detector    ,   帆布:大敌;! !,window.CanvasRenderingContext2D,,   ,webgl:, (function  (), {,   ,   try {大敌;   ,   var 才能;canvas =, document.createElement(, & # 39;帆布# 39;,),,return  ! !, (, window.WebGLRenderingContext ,,, (, canvas.getContext (, & # 39; webgl # 39;,), | |, canvas.getContext (, & # 39; experimental-webgl& # 39;,),),),,   ,   ,}catch  (), e , {,   ,   ,,return 假;   ,   }大敌;   ,   ,})(),   工人:大敌;! !,window.Worker,,   ,fileapi: window.File ,,, window.FileReader ,,, window.FileList ,,, window.Blob,,   ,   ,getWebGLErrorMessage: function  (), {,   ,   ,var  element =, document.createElement (, & # 39; div # 39;,),,=,element.id  & # 39; webgl-error-message& # 39;,,=,element.style.fontFamily  & # 39;等宽字体,,,=,element.style.fontSize  & # 39; 13 px # 39;,,=,element.style.fontWeight  & # 39;正常# 39;,,=,element.style.textAlign  & # 39;中心# 39;,,=,element.style.background  & # 39; # fff& # 39;,,=,element.style.color  & # 39; # 000 & # 39;,,=,element.style.padding  & # 39; 1.5 em # 39;,,=,element.style.width  & # 39; 400 px # 39;,,=,element.style.margin  & # 39; 5 em  auto  0 & # 39;;,   ,   ,if (!大敌;this.webgl ), {,   ,   element.innerHTML 才能=,window.WebGLRenderingContext  ?, (,   & # 39;才能Your  graphics  card  does  not  seem 用support  & lt; https://www.yisu.com/zixun/a  href=" http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation " rel=巴獠縩ofollow”rel="外部nofollow”> WebGL 。
',   “找出获得 。”   ]。加入(/n):(   你的浏览器似乎并不支持 WebGL 。
',   “找出获得
。”   ]。加入('/n ');      }      返回元素;      },      addGetWebGLMessage:函数(参数){      var家长,id元素;      参数=参数| | {};      父母=参数。父!==定义?参数。父:document.body;   id=参数。id !==定义?参数。id:“老人”;      元素=Detector.getWebGLErrorMessage ();   元素。id=id;      的父母。列表末尾(元素);      }      };//browserify支持   如果(typeof模块==='对象'){      模块。出口=探测器;      }

关于“Three.js利用Detector.js插件实现兼容性检测的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

Three.js利用Detector.js插件实现兼容性检测的方法