Question

我正在尝试在js文件中注册一个aframe组件，该文件包含在基本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;

请注意，“已注册”文本未显示在浏览器控制台中。我错过了什么？

Answer 1

最好将脚本标记放在场景之前的A-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);
            });
        }
    });
}

无法在js文件中注册aframe组件

1 个答案: