Блог

Главная - Вопросы по программированию - не удается зарегистрировать компонент aframe в файле js

не удается зарегистрировать компонент aframe в файле js

#javascript #html #aframe

#javascript #HTML #aframe

Вопрос:

Я пытаюсь зарегистрировать компонент aframe в файле js, который включен из базового файла html. Компоненты регистрируются правильно, когда в html внутри тегов скрипта, но не регистрируются, когда в файле js.

пример кода в html:

 <html lang="en-US">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<head>
    <meta charset="utf-8">
    <title>Gravity Puzzle</title>
    <meta name="description" content="">
    <script src="dist/aframe-v0.3.0.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

<body>
    <a-scene id="scene">
        <script>
            AFRAME.registerComponent('mouse-click-listener', {
                init: function () {
                    var el = this.el;
                    window.addEventListener('click', function () {
                        console.log("click");
                        el.emit('click', null, false);
                    });
                }
            });
        </script>

        <a-sky id="sky" color="#AAAACC"></a-sky>

        <a-entity id="cameraRoot" mouse-click-listener position="2 0.5 2" rotation="0 225 0">
            <a-entity id="myCamera" camera acceleration look-controls keyboard-controls>
            </a-entity>
        </a-entity>
    </a-scene>
</body>

</html>

Пример кода в файле js:

 function initialise()
{
    AFRAME.registerComponent('mouse-click-listener', {
        init: function () {
            console.log("registered");
            var el = this.el;
            window.addEventListener('click', function () {
                console.log("click");
                el.emit('click', null, false);
            });
        }
    });
}

window.onload = initialise;

Обратите внимание, что «зарегистрированный» текст не отображается в консоли браузера.
Чего мне не хватает?

Ответ №1:

Лучше всего размещать тег script после-Frame перед сценой. 

 <head>
  <meta charset="utf-8">
  <title>Gravity Puzzle</title>
  <meta name="description" content="">
  <script src="dist/aframe-v0.3.0.js"></script>
  <script src="mycomponent.js></script>
</head>

И не нужно переносить или ждать загрузки:

     AFRAME.registerComponent('mouse-click-listener', {
        init: function () {
            console.log("registered");
            var el = this.el;
            window.addEventListener('click', function () {
                console.log("click");
                el.emit('click', null, false);
            });
        }
    });
}

Комментарии:

1. Спасибо! Это решение работает. У меня также был запущен webpack в моем коде. Даже если бы я удалил свой код из функции инициализации, webpack продолжил бы и остановил выполнение. Итак, я удалил всю регистрацию компонентов в отдельный файл, как показано в приведенном выше ответе, и теперь все работает правильно!