Question

我对aframe相对较新，我在移动场景相机时遇到了一些麻烦。当我使用javascript将事件发送到包含wasd-controls组件的相机时。

我添加了一个div标签来封装我的场景，因为我稍后会在页面中添加其他反应组件。目前，我能够使用aframe-react库渲染场景，只要我不点击实际页面移动命令就可以正常工作。

但是，当我点击我的页面时（我假设专注于实际的div标签），我不再能够使用wasd键来移动相机。

我想我可以解决这个问题，我向相机发出了一个自定义的“关键事件”，并且wasd-controls网页组件能够处理相机的实际移动，但是我已尝试发出事件，调度事件，将事件重命名为onKeyDown，但无济于事。

我还尝试使用div标签在场景中包装我的实体（设计的object3D网格），这样只有那些实体可以聚焦，但这样做会导致无法呈现它们，并且控制台日志中没有显示错误。 / p>

非常感谢任何有关此问题的帮助。

  <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不起作用，但是为了解决方法，您需要发出keydown和{{1} } keyup组件侦听的window上的事件。

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

也许wasd-controls导致问题？

Answer 2

我遇到了与OP相同的问题。尽管我无法诊断出根本的问题，但是我可以通过将"wasd-controls" code复制到本地代码中并注册一个新的“ custom-wasd-controls”组件来回避它。我不知道为什么这行得通，但是行得通！

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)

难以移动aframe相机和发射事件到aframe相机的控件

3 个答案: