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非常小，你可以修改它以返回任何'消息'或任何你需要的东西。

顺便说一下好游戏：）

Answer 2

使用JavaScript捕获它并将用户重定向到错误消息。

替代未初始化的WebGL画布

2 个答案: