介绍
这篇文章将为大家详细讲解有关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插件实现兼容性检测的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。