CODEWITHSUNDEEP
javascriptreactjsaframe
illiadherzog
illiadherzog

Reputation: 23

difficulties moving aframe camera and emitting events to wasd-controls of aframe camera

I am relatively new to aframe and I'm having some trouble moving the scene's camera. When I dispatch an event to the camera which contains a wasd-controls component using javascript .

I added a div tag to encapsulate my scene because I'll be adding other react components to the page later. Currently, I am able to render the scene using the aframe-react library, and as long as I don't click on the actual page movement commands work fine.

But, when I click my page (and I assume focus on the actual div tag), I am no longer able to use wasd keys to move the camera.

I thought I could fix this my emitting a custom "key event" to the camera, and that the wasd-controls web component would be able to handle the actual movement of the camera, however I've tried emitting the event, dispatching the event, renaming the event to onKeyDown, but to no avail.

I also tried wrapping my entities (designed object3D meshes) in the scene using a div tag so that only those entities were focusable but doing so results in a failure to render them and there are no shown errors on the console log.

Any help with this issue would be greatly appreciated.

  <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>

Upvotes: 0

Views: 1153

Answers (3)

tbau
tbau

Reputation: 1

I was able to get the camera to move by putting the wasd-controls component on the camera and then calling dispatchEvent on the window. Make sure you use code instead of key or keyCode in the event because this is what the wasd-component uses. Also, make sure you send a keyup event to stop the key from repeatedly being pressed.

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

Upvotes: 0

Ian deBoisblanc
Ian deBoisblanc

Reputation: 169

I ran into the same issue as OP. Although I was unable to diagnose the underlying issue, I WAS able to sidestep it by copying the "wasd-controls" code into my local code and registering a new "custom-wasd-controls" component. I have no idea why this would work, but it does!

Upvotes: 1

ngokevin
ngokevin

Reputation: 13233

I'm not sure why the WASD isn't working if you wrap the scene in a div, but for a workaround, you'll want to emit the keydown and keyup events on the window which is where the wasd-controls component listens to.

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

Perhaps the tabIndex is causing the issue?

Upvotes: 0

Related Questions