Добавить холст на fullpage.js

Я пытаюсь добавить WebGL-скрипт на сайт с FullPage.js, но он работает не так хорошо (у меня просто черный экран). Я понятия не имею, в чем проблема, так как и WebGL-скрипт, и Fullpage.js прекрасно работают по отдельности. Я не смог добавить весь сценарий в jsFiddle, но сценарии можно увидеть на этом сайте http://www.scandinavija.com/index.html (я удалил все не относящиеся к делу сценарии).

Когда я проверяю сайт в Chrome, я получаю следующую ошибку: "Uncaught TypeError: Невозможно прочитать свойство" offsetWidth "для null в частиц.js:6" Может ли это быть проблемой?

Мой инстинкт, однако, скорее говорит мне, что проблема должна быть где-то здесь:

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
    <link rel="stylesheet" type="text/css" href="css/examples.css">

    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/scrolloverflow.js"></script>
    <script type="text/javascript" src="js/jquery.fullPage.js"></script>

    <!-- Particles (three.js) -->
    <script type="text/javascript" src="js/detector.js"></script>
    <script type="text/javascript" src="js/stats.min.js"></script>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/particles.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                verticalCentered: true,
                anchors: ['firstSection', 'secondSection', '3rdSection',     
                '4thSection', '5thSection'],
            });
        });
    </script>
</head>
<body>

<!-- My canvas (three.js) below -->

<div id="canvas-container"></div>

    <div id="fullpage">
        <div class="section" id="section1"></div>
        <div class="section" id="section2"></div>
        <div class="section" id="section3"></div>
        <div class="section" id="section4"></div>
        <div class="section" id="section5"></div>
    </div>
</body>
</html>

CSS:

@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
    background-color: #000;
}
a{
    text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
    font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
   content:'';
}
abbr,acronym { border: 0;
}

/* START OF MY SCRIPT BELOW*/

#canvas-container {
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
}
Источник

1 ответ

Решение

Вы получаете эту ошибку, потому что вы пытаетесь получить доступ к свойству объекта, который оценивается как ноль.

particles.js

var container = document.getElementById('canvas-container');
//                                       ^^^^^^^^^^^^^^^^
//                                       not found
var w = container.offsetWidth;
//      ^^^^^^^^^
//      eq. null

Это потому, что ваш элемент #canvas-container не существует в DOM, когда скрипт particles.js выполнен.

Вам просто нужно обернуть ваш код внутри загруженного документа обратного вызова, чтобы убедиться, что элемент будет доступен:

$(function() {
  // particles.js code
});

Вы также можете просто переместить тег скрипта в конец вашего HTML-файла:

  ...
  <script type="text/javascript" src="js/particles.js"></script>
</body>
Источник
Другие вопросы по тегам