Aframe 在组件之间发出自定义事件

Question

我正在尝试在框架中创建一个自定义事件 dataReady，该事件将在成功下载几个不同的数据源时发出。我希望多个其他组件侦听此事件，然后使它们的元素父元素变得可见或执行其他操作。

在下面的示例代码中，在事件发出之前添加了 eventListener（使用 console.log() 测试），但是在事件发出时没有调用元素上的侦听器函数发射。我觉得所有的部分都已到位，但它无法正常工作。任何想法将不胜感激？

附加到 <a-camera data-controller></a-camera>

的组件 1

AFRAME.registerComponent('data-controller', {
    init: function () {
        var el = this.el;
    },
    update: function () {
        async.eachSeries(['api-1', 'api-2'],
            function (item, cb) {
                console.log(item);
                cb();
            },
            function (err) {
                if (err) {
                    throw new Error('Error retrieving data from server');
                }

                console.log("emitting the event");
                this.el.emit("dataReady", {value: 2}, false);
            }.bind(this));
    }
});

附加到 <a-entity geometry="primitive:plane" road></a-entity>

的组件 2

AFRAME.registerComponent('road', {
    schema: {
        width: {type: 'number', default: 4},
        height: {type: 'number', default: 4}
    },

    init: function () {
        var data = this.data;
        var el = this.el;

        // Update geometry props
        el.setAttribute('geometry', 'width', data.width);
        el.setAttribute('geometry', 'height', data.height);

        console.log('adding an event listener');
        el.addEventListener('click', function (event) {
            console.log("we are ready to blast off b/c of event listened w/ detail value: " + event.detail.value);
        });
    }
});

index.html内容：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!--Vendor Scripts-->
    <script src="./js/vendor/aframe.min.js"></script>
    <script src="./js/vendor/async.min.js"></script>

    <!--AFRAME Components-->
    <script src="./js/components/road.js"></script>
    <script src="./js/data-controller.js"></script>
</head>

<body>
<a-scene>
    <a-entity geometry="primitive:plane" road></a-entity>
    <a-camera data-controller></a-camera>
</a-scene>
</body>
</html>

Answer 1

您可以依靠 事件冒泡 并监听场景，并将实体存储在事件详细信息中以便您知道它来自哪里：

// data-controller component
this.el.emit('dataready', {value: 2, el: this.el})
// Event will bubble to the scene.

// road component
this.el.sceneEl.addEventListener('dataready', function () { // ... });

或者您可以使用 选择器属性类型 将引用传递给要收听的实体：

// road component
schema: {
    dataEl: {type: 'selector'},
    width: {type: 'number', default: 4},
    height: {type: 'number', default: 4}
},

init: function () {
  // ...
  this.data.dataEl.addEventListener('dataready', function () { // ... });
}

// <a-entity road="dataEl: [data-controller]"></a-entity>

Aframe 在组件之间发出自定义事件

Aframe Emitting Custom Events Between Components

javascript

aframe