Question

main.html中有一个aframe对象：

<a-gltf-model id='player1'  foobox playmyclip src="#myMixBun" ></a-gltf-model>

我想让它在发出eventListener“ driveplay”时执行gltf剪辑动画。在foofile.js中：

AFRAME.registerComponent('playmyclip', {
  init: function () {
    var el = this.el;
    el.addEventListener('driveplay', function () {
    el.setAttribute('animation-mixer', {clip: 'Drive', loop: 'once'});
    });
  }
});

目前我拥有它，因此当按j键时，会发出“ driveplay”：

AFRAME.registerComponent('foobox', {
    init: function() {
    var el = this.el
    var swingno = 0;
     self = this;
          document.addEventListener('keydown', (event) => {
          const keyName = event.key;
                if (keyName === 'j') {
                el.emit('driveplay',{},true);

                             // code to store record of event in Mongo for second player
                var playerid = self.el.getAttribute('id');
               var playerMid = Games.findOne({name: playerid})._id;
              Games.update({_id: playerMid},{$set:{swings : swingno}});
              swingno = swingno + 1;
             }
       })
   }
  });

但是我还需要在player2的屏幕上同时进行动画制作。因此，在上面的代码中，每次动画发生时，我都会在Mongo中增加一个变量。然后在main.js中，只要Mongo中的“ swingno”发生变化，流星就会自动发出一个事件。 main.js：

import {EventEmitter} from 'meteor/raix:eventemitter';
Event = new EventEmitter();
var swingcnt1 = 0;
Template.hello.helpers({
  counter() {
        if (Games.findOne())   //mongo is ready to access
      {
          var plyr1Swing = Games.findOne({name: "player1"}).swings;
        if (plyr1Swing !== swingcnt1) {
        Event.emit('driveplay',{},true);
    swingcnt1 = plyr1Swing;
        console.log(“this shows on player2’s console automatically”, swingcnt1);
   }
}
else    {null} 
return { ........};
},

当player1按下“ j”键时，动画将正确显示在其屏幕上，并且该事件将记录在Mongo中，并且player2将收到更新的Mongo值（因为它显示在console.log中）。

问题是

Event.emit('driveplay',{},true);

声明不会在player2的屏幕上触发动画。这有点棘手，因为我需要流星的“ raix：eventemitter”程序包来创建aframe事件监听器可以看到的事件。我可能根本没有发出任何事件，因为我不知道如何测试该事件是否有效。或者可能是框架无法看到发出的事件。

可能有一种更简单的方法。感谢您的帮助。

Answer 1

已解决该解决方案是使用Aframe组件内部流星的raix：eventemitter包中的侦听器代码。

https://atmospherejs.com/raix/eventemitter

AFRAME.registerComponent('playmyclip', {
  init: function () 
      var el = this.el;
    listener = function() {
           el.setAttribute('animation-mixer', {clip: 'Drive', loop: 'once'});
   };
   Event.on('driveplay', listener);
 }
});

再加上foobox组件不再需要：

 if (keyName === 'j') {
  el.emit('driveplay',{},true);

player1和player2都从

获取动画事件

 Event.emit('driveplay',{},true);

当流星助手注意到mongodb中的变化时，在main.js中

。

流星发射事件，然后由框架事件侦听器使用

1 个答案: