使用带有shake.js事件的远程端口控件的a帧

Question

我想在我的A帧项目中使用fernandojsg的传送控制，但我想使用它们的方式是与shake.js一起使用，一次抖动使传送线出现，另一次则用于您选择的实际传送。

我看过这些文档，并看到了startEvents和endEvent属性，我想将它们映射到握手事件中.对我来说，这听起来像是我必须创建一个自定义组件来完成这个任务，但是我想先寻求帮助，看看这样做是否可行。

到目前为止，我已经制作了这个(litch.com/ link)，但到目前为止它还不起作用(请注意，我还有一些其他库可以使用握手、鼠标切换和类似的事件。)我的计划是根据用户想要移动的方式激活或禁用它们)

    <a-entity id="player" wasd-controls tap-to-walk>
     <a-camera id="eyes" position="-.5 1.5 0" camera="" look-controls="" mouse-cursor="">
      <a-entity id="cursor" cursor="fuse: false;"
        position="0 0 -1"
        geometry="primitive: ring; radiusInner: 0.015; radiusOuter: 0.019"
        material="color: white; shader: flat"
        raycaster="far: 5; interval: 1000; objects: .clickable">
      </a-entity>
      <a-entity id="texto" text="value:Hola;align:center" position="0 -.3 -0.5"></a-entity>
      <a-plane position="0 .7 -1" material="transparent: true;  opacity: 0.5; color: #ffec04; shader:flat;"  scale="1 0.2 1"></a-plane>
    </a-camera>
    <a-entity
    teleport-controls="cameraRig: #player; teleport-origins: #eyes; startEvents:['shake','mousedown']">        </a-entity>
    <a-entity id="step" sound="src: #step1"></a-entity>
  </a-entity>

谢谢..。

Answer 1

是的，您需要一些JS或自定义组件来使shake.js和远程端口控件协同工作，原因有两个：

1. shake.js在window上的A帧场景之外发布事件，teleport-controls没有监听
2. shake.js只发出一种事件类型，您需要区分startEvents和endEvents

但这不需要很复杂：

AFRAME.registerComponent('shake-listener', {
  init: function () {
    var targetEl = this.el
    var count = 0
    // you could also initialize the shake instance here
    window.addEventListener('shake', function () {
      if (++count % 2) {
        targetEl.emit('shakestart')
      } else {
        targetEl.emit('shakeend')
      }
    })
  }
})

然后将shake-listener添加到与teleport-controls="startEvents: shakestart; endEvents: shakeend"相同的实体中