webgl-compatibility-check.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html><html lang="en"><head>
  2. <meta charset="utf-8">
  3. <title>WebGL Compatibility Check</title>
  4. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  5. <meta name="twitter:card" content="summary_large_image">
  6. <meta name="twitter:site" content="@threejs">
  7. <meta name="twitter:title" content="Three.js – WebGL Compatibility Check">
  8. <meta property="og:image" content="https://threejs.org/files/share.png">
  9. <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
  10. <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
  11. <link rel="stylesheet" href="../resources/lesson.css">
  12. <link rel="stylesheet" href="../resources/lang.css">
  13. <script type="importmap">
  14. {
  15. "imports": {
  16. "three": "../../build/three.module.js"
  17. }
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <div class="container">
  23. <div class="lesson-title">
  24. <h1>WebGL Compatibility Check</h1>
  25. </div>
  26. <div class="lesson">
  27. <div class="lesson-main">
  28. <p>
  29. Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL 2.
  30. The following method allows you to check if it is supported and display a message to the user if it is not.
  31. Import the WebGL support detection module, and run the following before attempting to render anything.
  32. </p>
  33. <pre class="prettyprint notranslate lang-js" translate="no">
  34. import WebGL from 'three/addons/capabilities/WebGL.js';
  35. if ( WebGL.isWebGL2Available() ) {
  36. // Initiate function or other initializations here
  37. animate();
  38. } else {
  39. const warning = WebGL.getWebGL2ErrorMessage();
  40. document.getElementById( 'container' ).appendChild( warning );
  41. }
  42. </pre>
  43. </div>
  44. </div>
  45. </div>
  46. <script src="../resources/prettify.js"></script>
  47. <script src="../resources/lesson.js"></script>
  48. </body></html>
粤ICP备19079148号