您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Three.js利用Detector.js插件實(shí)現(xiàn)兼容性檢測(cè)的方法,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
前言
Three.js用Detector.js插件實(shí)現(xiàn)兼容性檢測(cè)的相關(guān)內(nèi)容
其實(shí)Detector.js插件的代碼很短,但是功能很全,
(1)判斷canvas兼容。
(2)判斷webgl兼容性。
(3)在頁(yè)面添加不兼容提示信息。
這三個(gè)功能已經(jīng)對(duì)兼容性檢測(cè)足夠了。
使用方式也很簡(jiǎn)單:
首先,將插件引入到頁(yè)面:
<script src="examples/js/Detector.js"></script>
然后,在js里面添加一個(gè)判斷:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
就實(shí)現(xiàn)了兼容性的檢測(cè),是不是很簡(jiǎn)單,去測(cè)試一下吧。
下面,附上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" >WebGL</a>.<br />', 'Find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" >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" >WebGL</a>.<br/>', 'Find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" >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; }
關(guān)于“Three.js利用Detector.js插件實(shí)現(xiàn)兼容性檢測(cè)的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。