Альтернатива для неинициализированного холста WebGL - PullRequest
Новая
       0

Альтернатива для неинициализированного холста WebGL

2 голосов
/ 26 ноября 2011

На моем веб-сайте размещена игра WebGL. Когда WebGL не удается инициализировать, он просто показывает огромное пустое место на странице. Можно ли показать что-то другое здесь, когда инициализация не удалась?

Вот сайт: http://www.pabloproductions.be/Planetoids.html Вверху вы можете играть в игру, если у вас включен webGL.

Ответы [ 2 ]

2 голосов
/ 26 ноября 2011

Все примеры 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 ( ! 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 довольно маленький, и вы можете изменить его так, чтобы оно возвращало любое «сообщение». или все, что вам нужно.

Кстати, хорошая игра:)

0 голосов
/ 26 ноября 2011

Перехватите его с помощью JavaScript и перенаправьте пользователя на сообщение об ошибке.

...