In fact, the code of the Detector.js plug-in is very short, but it has full functions.
(1) Determine canvas compatibility.
(2) Determine webgl compatibility.
(3) Add incompatibility prompt information to the page.
These three functions are sufficient for compatibility detection.
This article mainly introduces to you the relevant information on how Three.js uses the Detector.js plug-in to implement compatibility detection. The article introduces it in detail through the example code, which will be a certain reference for everyone's study or work. Value, friends in need come and take a look below. Hope it helps everyone.
The usage is also very simple:
First, introduce the plug-in to the page:
<script src="examples/js/Detector.js"></script>
Then, add a judgment in js:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
The compatibility detection is implemented. Is it very simple? Let’s test it.
Below, attach the Detector.js plug-in code:
/**
* @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( 'p' );
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;
}Related recommendations:
JS method to solve position:sticky compatibility problem
Summary of some compatibility and error-prone issues in js
Specific analysis of compatibility performance in JavaScript
The above is the detailed content of Detector.js plug-in implements compatibility detection code. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
