移动aframe相机和向aframe相机的wasd控件发射事件的困难

Question

我是aframe的新手，我在移动场景的摄像头时遇到了一些麻烦。当我使用javascript向相机发送一个事件时，它包含了一个wasd-control组件。

我添加了一个div标签来封装我的场景，因为稍后我将向页面添加其他react组件。目前，我可以使用aframe-react库渲染场景，只要我不点击实际的页面移动命令就可以了。

但是，当我点击我的页面时(我假设焦点在实际的div标签上)，我不再能够使用wasd键来移动相机。

我想我可以通过向相机发射一个自定义的“按键事件”来解决这个问题，并且wasd-controls web组件将能够处理相机的实际移动，但是我尝试了发射事件，调度事件，将事件重命名为onKeyDown，但都没有效果。

我还尝试使用div标签在场景中包装我的实体(设计的object3D网格)，以便只有这些实体是可聚焦的，但这样做会导致无法渲染它们，并且控制台日志中没有显示错误。

在这个问题上的任何帮助都是非常感谢的。

  <div tabIndex={-1}

       onKeyDown={(e) => {

            let keyDownEvent = new Event("KeyEvent");

            //document.getElementById("camera").emit("onKeyDown", {key: e.key, keyCode: e.keyCode}, false)
            console.log('dispatching custom keydown event to camera')
            document.getElementById("camera").dispatchEvent(keyDownEvent);
            document.getElementById("camera").update()


          }}

       >

    <Scene id="scene">
      <Entity
        id="camera"
        primitive="a-camera"
        mouse-cursor
        look-controls="enabled: true"
        wasd-controls="enabled: true"
        <Entity primitive="a-cursor"/>
      </Entity>



     /* <a-camera id="camera" wasd-controls></a-camera> */



    </Scene>
  </div>

Answer 1

如果您将场景包装在div中，我不确定为什么WASD不能工作，但是作为一种变通方法，您需要在wasd-controls组件侦听的window上发出keydown和keyup事件。

https://github.com/aframevr/aframe/blob/master/src/components/wasd-controls.js#L166

也许是tabIndex导致了这个问题？

Answer 2

我遇到了和OP一样的问题。尽管我无法诊断潜在的问题，但我能够通过将"wasd-controls" code复制到我的本地代码中并注册一个新的“自定义控件”组件来避开它。我不知道为什么这会起作用，但它确实起作用了！

Answer 3

通过将wasd-controls组件放在相机上，然后在窗口上调用dispatchEvent，我能够让相机移动。确保在事件中使用代码而不是key或keyCode，因为这是wasd-component使用的。此外，请确保发送keyup事件以停止重复按键。

        window.dispatchEvent(new KeyboardEvent('keydown',{'code':'KeyW'}))
        setTimeout(()=>{
            window.dispatchEvent(new KeyboardEvent('keyup',{'code':'KeyW'}))
            },100)