html - 未初始化的 WebGL Canvas 的替代方案

Question

在我的网站上，我托管了一个 WebGL 游戏。当 WebGL 初始化失败时，它只会在页面上显示一个巨大的空白区域。初始化失败时是否可以在这里显示一些不同的东西？

这是网站: http://www.pabloproductions.be/Planetoids.html如果启用了 webGL，您可以在顶部玩游戏。

Answer 1

我见过的所有 Three.js 示例都带有“Detector.js”...效果很好，如果您的浏览器或视频卡不支持 WebGL，则会报告。一探究竟... https://github.com/mrdoob/three.js/

我在个人网站的开发版本(尚未部署)上使用他的 Dector.js，并在用户浏览器不支持 WebGL 的情况下使用结果加载替代内容。查看 Three.js 存储库中的任何示例，Detector.js 位于 js 文件夹中，代码在大多数示例(如果不是全部)的顶部被调用。我是这样用的

if (! Detector.webgl ) {
    // run the same old javascript that I've been using here
}

和一个

if ( Detector.webgl ) {
  // remove the head so I can run some WebGL stuff here
}

等等等等......

和报告部分我这样做(附加代码是我的网站，当然放你喜欢的......基本上把你需要的任何东西放在'if NOT'条件下

if ( ! Detector.webgl ) {
        var underText;//this holds the element that we will use to draw in
        underText = document.getElementById("webgl-box");

        $('.webgl-box').append('<p style="font-size: 14px;"><img src="<?= $this->baseUrl() ?>/images/red-x.png" /> No, This page does NOT detect support for WebGL<br />\n\
                                       Here are some resources to help you get started with WebGL</p>');
        $('.webgl-box').append(Detector.getWebGLErrorMessage());

        $('.webgl-box').append('<p style="font-size: 14px;">Firefox for Android also supports WebGL</p>');

        }

Detector.getWebGLErrorMessage() 是从 Dector.js 返回的内容，只需查看 Detector.js 的源代码，您就会看到发生了什么，detector.js 非常小，您可以修改它以返回任何“消息”或您需要的任何内容。

顺便说一句，不错的游戏:)