当前位置：文江博客话题详情

未初始化的 WebGL 画布的替代方案

发布于 2024-12-17 19:43:41 字数 242 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏の忆 2024-12-24 19:43:41

我见过的所有 Three.js 示例都带有“Detector.js”...效果很好，如果您的浏览器或显卡不支持 WebGL，则会报告。一探究竟...
https://github.com/mrdoob/third.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 ( ! 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非常小，你可以修改它返回任何“消息”或者任何你需要的

好游戏:)

All of the Three.js examples that I've seen come with 'Detector.js'...Works well, reports if your browser or video card does not support WebGL. Check it out...
https://github.com/mrdoob/three.js/

I'm using his Dector.js on the development version of my personal site (not deployed yet), and using the results as well to load alternate content in the event that WebGL is not supported by a user's browser. Take a look in any of the examples at the Three.js repository, Detector.js is in the js folder, and the code is called at the top of most of the examples (if not all of them). I use it like this

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

and a

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

etc, etc...

and the reporting section I do this (the append code is for my site, put what you like of course...Basically put whatever you need in the 'if NOT' condition

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>');

        }

The Detector.getWebGLErrorMessage() is whats returned from the Dector.js, just look in the source of Detector.js and you will see whats going on, detector.js is pretty small and you can modify it to return whatever 'message' or anything that you need as well.

Nice game by the way :)

回复收藏 0 原文

~没有更多了~